Creating a horizontal line to the left of centered text using CSS styling

Question

Creating a horizontal line to the left of centered text using CSS styling

Is there a way to display a horizontal line to the left of text while keeping the text center aligned? Refer to the image below for clarification.

Below is the markup I am currently using, which includes Bootstrap 4:

https://i.sstatic.net/KF8WJ.png

     <div class="text-center nav-items">
    <ul>
      <div class="pb-5">
        <li>
          <a href="#"><h2 class="sidebar-first-item">About</h2></a>
        </li>
        <p>Behind the brand // Meet the team</p>
      </div>
      <div class="pb-5">
        <li>
          <a href="#"><h2>Our Work</h2></a>
        </li>
        <p>Take a look at our marvelous creations</p>
      </div>
      <div class="pb-5">
        <li>
          <a href="#"><h2>Services</h2></a>
        </li>
        <p>Learn more about what we can do for you</p>
      </div>
      <div class="pb-5">
        <li>
          <a href="#"><h2 class="sidebar-last-item">Contact</h2></a>
        </li>
        <p>Get in touch today. Let's make some magic</p>
      </div>
    </ul>
   </div>

css bootstrap-4

Answer 1

Answer №1

To create this effect, utilize pseudo-elements:

.menu-item {
  position: relative;
}

.menu-item:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 3px;
  background-color: blue;
  top: 50%;
  left: 0%;
}

CodePen Link: https://codepen.io/johndoe/pen/abc123xyz

Answer 2

To create this effect, utilize pseudo-elements:

.menu-item {
  position: relative;
}

.menu-item:before {
  content: '';
  position: absolute;
  width: 50%;
  height: 3px;
  background-color: blue;
  top: 50%;
  left: 0%;
}

CodePen Link: https://codepen.io/johndoe/pen/abc123xyz

Answer 3

Answer №2

Before making any further changes, it is essential to tidy up your HTML code. A <ul> list should only have children elements like <li>, <script>, or <template>. Therefore, remove the div elements inside the .</ul> and transfer their classes to the <li> tags.

To address your design issue, consider adding a wrapping element before and after your anchor links. You can adjust the width using percentages and set a minimum width for the anchors to ensure a responsive layout, especially on smaller devices. This technique will create an evenly spaced red line.

If you prefer the red line to align with the text's width, you can use non-breaking spaces in your anchors along with padding. This will bring the red line closer to the text according to the specified padding.

.redline,
.spacer {
  width: 100%;
  height: 3px;
  display: inline;
  background-color: red;
}

.spacer {
  height: 0px;
}

li {
  display: flex;
  align-items: center;
}

li a {
  margin: 0 auto;
  border: 0px solid gold;
  padding: 0 20px;
  white-space: nowrap;
}

li p {
  width: 100%; margin:-50px 0 50px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
  <ul>
    <li class="pb-5">

      <span class="redline"></span>
      <a href="#">
        <h2 class="sidebar-first-item">About</h2>
      </a>
      <span class="spacer"></span>

    </li>
    <li>
      <p>Take a look at our marvelous creations</p>
    </li>



    <li class="pb-5">
      <span class="redline"></span>
      <a href="#">
        <h2>Our Work</h2>
      </a>
      <span class="spacer"></span>     
    </li>
    <li>
      <p>Behind the brand // Meet the team</p>
    <li>



  </ul>
</div>

Answer 4

Before making any further changes, it is essential to tidy up your HTML code. A <ul> list should only have children elements like <li>, <script>, or <template>. Therefore, remove the div elements inside the .</ul> and transfer their classes to the <li> tags.

To address your design issue, consider adding a wrapping element before and after your anchor links. You can adjust the width using percentages and set a minimum width for the anchors to ensure a responsive layout, especially on smaller devices. This technique will create an evenly spaced red line.

If you prefer the red line to align with the text's width, you can use non-breaking spaces in your anchors along with padding. This will bring the red line closer to the text according to the specified padding.

.redline,
.spacer {
  width: 100%;
  height: 3px;
  display: inline;
  background-color: red;
}

.spacer {
  height: 0px;
}

li {
  display: flex;
  align-items: center;
}

li a {
  margin: 0 auto;
  border: 0px solid gold;
  padding: 0 20px;
  white-space: nowrap;
}

li p {
  width: 100%; margin:-50px 0 50px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="text-center nav-items">
  <ul>
    <li class="pb-5">

      <span class="redline"></span>
      <a href="#">
        <h2 class="sidebar-first-item">About</h2>
      </a>
      <span class="spacer"></span>

    </li>
    <li>
      <p>Take a look at our marvelous creations</p>
    </li>



    <li class="pb-5">
      <span class="redline"></span>
      <a href="#">
        <h2>Our Work</h2>
      </a>
      <span class="spacer"></span>     
    </li>
    <li>
      <p>Behind the brand // Meet the team</p>
    <li>



  </ul>
</div>

Answer 5

Answer №3

Utilizing a CSS pseudo element can enhance the design of your elements! A pseudo element allows for the addition of decorative elements before or after an existing element.

I included a new class named horizontal-line to style your h2 element.

<div class="text-center nav-items">
<ul>
  <div class="pb-5">
    <li>
      <a href="#"><h2 class="horizontal-line sidebar-first-item">About</h2></a>
    </li>
    <p>Behind the brand // Meet the team</p>
  </div>
  <div class="pb-5">
    <li>
      <a href="#"><h2>Our Work</h2></a>
    </li>
    <p>Take a look at our marvelous creations</p>
  </div>
  <div class="pb-5">
    <li>
      <a href="#"><h2>Services</h2></a>
    </li>
    <p>Learn more about what we can do for you</p>
  </div>
  <div class="pb-5">
    <li>
      <a href="#"><h2 class="sidebar-last-item">Contact</h2></a>
    </li>
    <p>Get in touch today. Let's make some magic</p>
  </div>
</ul>

This is how the CSS styling would appear:

.horizontal-line {
 position: relative;
}

.horizontal-line::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 35%;
  border-radius: 30px;
  background-color: #DE657D;
}

By implementing the pseudo element, it automatically adds the specified design before any element with that class name. In this instance, we are using an empty content value for the decorative effect.

Visit this link for reference.

Answer 6

Utilizing a CSS pseudo element can enhance the design of your elements! A pseudo element allows for the addition of decorative elements before or after an existing element.

I included a new class named horizontal-line to style your h2 element.

<div class="text-center nav-items">
<ul>
  <div class="pb-5">
    <li>
      <a href="#"><h2 class="horizontal-line sidebar-first-item">About</h2></a>
    </li>
    <p>Behind the brand // Meet the team</p>
  </div>
  <div class="pb-5">
    <li>
      <a href="#"><h2>Our Work</h2></a>
    </li>
    <p>Take a look at our marvelous creations</p>
  </div>
  <div class="pb-5">
    <li>
      <a href="#"><h2>Services</h2></a>
    </li>
    <p>Learn more about what we can do for you</p>
  </div>
  <div class="pb-5">
    <li>
      <a href="#"><h2 class="sidebar-last-item">Contact</h2></a>
    </li>
    <p>Get in touch today. Let's make some magic</p>
  </div>
</ul>

This is how the CSS styling would appear:

.horizontal-line {
 position: relative;
}

.horizontal-line::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 35%;
  border-radius: 30px;
  background-color: #DE657D;
}

By implementing the pseudo element, it automatically adds the specified design before any element with that class name. In this instance, we are using an empty content value for the decorative effect.

Visit this link for reference.

Creating a horizontal line to the left of centered text using CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

Form control named 'startTime' and 'endTime' do not have a valid value accessor

What is the best way to ensure that my two sections stay vertically aligned, even when they have varying amounts of content and are scaled

Event firing in child components of Vue.js can occasionally fail to trigger

Aligning a picture with a heading

Issue with Flexbox alignment: Second row does not line up with first row

What could be causing the Navbar Collapse feature to malfunction in my Bootstrap setup?

Tips for adjusting the width of dynamic list boxes according to user input

What is the best way to adjust the width and height of react-flip-page through CSS for different media queries?

How can I fill the space around a centrally aligned div?

Creating a custom design for a dropdown menu in the Bootstrap navbar

Images and CSS are functioning properly when viewed locally, but are not displaying as expected on GitHub pages

Radio buttons that are arranged vertically with spaces in between (Bootstrap 4)

What is preventing window.scrollTo() from being executed?

Ways to dynamically manipulate HTML elements in Angular 5

Formatting text and images in CSS

Embed JavaScript within the Material-UI style components

Why won't applying a binding style affect the appearance of my Vue component?

Content that is partially concealed when scrolling through div elements

The animation for the Bootstrap modal is not functioning correctly

Icons disappear from the navbar toggle when clicked on a small screen