Creating a header using pseudo elements

Question

Creating a header using pseudo elements

Check out a CodePen I created to demonstrate the issue. It would be easiest if you could take a look at it here.

I am trying to figure out a way to include pseudo elements before and after a heading to display a 1px height line that extends from the sides but is interrupted by the text.

-------------------------------------- Text --------------------------------------

If the text wraps into two lines due to length or display size, I want the left line to still align with the beginning and the right part to stay next to the end.

------------------------------ More text that will cover
                                    multiple lines ------------------------------

My ideal scenario would be something like this:

______________________________ More text that will cover _________________________
                                    multiple lines

However, I have been unsuccessful in achieving this so far...

html css

Answer 1

Answer №1

One way to ensure that a line stays centered within text, even when the text spans multiple lines, is to use a pseudo element positioned at 50% from the top or bottom.

h5 {
  text-align: center;
  position: relative;
}
h5:before {
  content: '';
  position: absolute;
  top: 50%;
  background: #000;
  height: 1px;
  left: 0; right: 0;
}

span {
  background: #FFF;
  padding: 0 10px;
  position: relative;
  text-align: center;
  display: inline-block;
}

<h5><span>This is<br>some text</span></h5>

Answer 2

One way to ensure that a line stays centered within text, even when the text spans multiple lines, is to use a pseudo element positioned at 50% from the top or bottom.

h5 {
  text-align: center;
  position: relative;
}
h5:before {
  content: '';
  position: absolute;
  top: 50%;
  background: #000;
  height: 1px;
  left: 0; right: 0;
}

span {
  background: #FFF;
  padding: 0 10px;
  position: relative;
  text-align: center;
  display: inline-block;
}

<h5><span>This is<br>some text</span></h5>

Creating a header using pseudo elements

Answer №1

Similar questions

Execute a webpage in the background using PHP

What steps should be taken to ensure that the function triggered by @submit functions properly?

A guide on accessing a WebElement through a Hover Menu using Selenium with JAVA

Tips for resizing a 100% div without displaying vertical scrollbars in the browser

Pass information from JavaScript to PHP without using a form

Adjusting the width of innerHtml within a React router link to match the parent element's width

Add content to the beginning of the input with the assistance of bootstrap. However, ensure that when utilizing "form-group row", the content is shifted

Having trouble getting background image transitions to work properly in CSS?

What is the method for executing code in HTML without needing a beginning or ending tag?

"Usage of Wildcard in CSS Selectors for customizable path selection

Looking to transform a list into JSON format using JavaScript?

Reload a forum in a div without refreshing the entire page

problem with CSS negative margin

Is there a way to determine the location where my website is fetching CSS and media files from?

Conceal a div element after redirecting to a different HTML page

Acquiring the `=` symbol within email HTML

Using ajax to submit a form in CodeIgniter and displaying the returned data in a table view

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

Steps for creating a horizontal card design

Unable to see background image inside div