1. Snippets
  2. ›
  3. CSS
  4. ›
  5. How to Add Lines Before and After the Heading Text

How to Add Lines Before and After the Heading Text

You want to give the headings of your pages an original and attractive style, but you don’t know how? Read this snippet, and you'll learn to add lines before and after the headings. You can get such an effect by using the ::before and ::after pseudo-elements. Let’s do it together step by step.

Create HTML

  • Put your heading text within the <h1> element.
<h1>Welcome!</h1>

Add CSS

  • Put the font and font-size of the heading with the font-family and font-size properties.
  • Align the heading to the center with the "center" value of the text-align property.
  • Create space around the heading with the margin property.
  • We will add a line before the heading through the ::before pseudo-element and then, specify the the color of the text.
  • Put the content property, which is always used with the ::before and ::after pseudo-elements to generate content inside an element.
  • Set the height and width of the line according to your text.
  • You can give the line a color using the background property.
  • Define the top and left positions of the line with the top and left properties.
  • For styling the ::after pseudo-element, use the same properties above. Only instead of the left property, you need to set the right property.
h1 {
  font-family: sans-serif;
  margin: 100px auto;
  color: #228B22;
  text-align: center;
  font-size: 30px;
  max-width: 600px;
  position: relative;
}

h1:before {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: #000;
  left: 0;
  top: 50%;
  position: absolute;
}

h1:after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: #000;
  right: 0;
  top: 50%;
  position: absolute;
}

Now let’s put the whole code together and try some examples.

Example of adding lines before and after the heading text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-family: sans-serif;
        margin: 100px auto;
        color: #228B22;
        text-align: center;
        font-size: 30px;
        max-width: 600px;
        position: relative;
      }
      h1:before {
        content: "";
        display: block;
        width: 130px;
        height: 5px;
        background: #191970;
        left: 0;
        top: 50%;
        position: absolute;
      }
      h1:after {
        content: "";
        display: block;
        width: 130px;
        height: 5px;
        background: #191970;
        right: 0;
        top: 50%;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to W3Docs!</h1>
  </body>
</html>

Result

Welcome to W3Docs!

If you want the lines to be closer to the text, you need to change the left and right positions.

Example of adding horizontal lines before and after the text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-family: sans-serif;
        margin: 100px auto;
        text-align: center;
        color: black;
        font-size: 40px;
        max-width: 600px;
        position: relative;
      }
      h1:before {
        content: "";
        display: block;
        width: 150px;
        height: 5px;
        background: #CD5C5C;
        left: 85px;
        top: 50%;
        position: absolute;
      }
      h1:after {
        content: "";
        display: block;
        width: 150px;
        height: 5px;
        background: #CD5C5C;
        right: 85px;
        top: 50%;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <h1>Hello!</h1>
  </body>
</html>

Related Resources

Do you find this helpful?

Related articles