Add Fancy HTML Heading Underline

In a recent project the default HTML underline added to a heading was of the wrong style. The line being too thin and too tight to the text, the gap was insufficient.

Using the HTML underline gives a line close to the bottom of the text. But it’s thickness can’t be defined and neither can the size of the gap. The available options are quite limited.

The client asked for the line below a heading to be thicker and the gap between the text and the line to be much greater than the default.

Changing the distance between an underline and its associated text isn’t a CSS option. A different approach is required.

I chose to use the pseudo-element after to create and define the underline. The underline of the text would be turned off.

The after pseudo class would be a block and then it’s characteristics defined.

For ease I’ll describe making changes to the h3 heading element .

For the h3 to the CSS add:

h3::after{}

Note how the reference has two colons.

We want a content item of display block and an offset

h3, .h3 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size:24px;
  line-height:30px;
  font-weight:700;
  color:rgb(39, 40, 56);
  margin-bottom: 40px;
}
 h3::after{
  display: block;
  content: "";
  border-bottom:8px solid #79ada2;
  transform: translateY(20px);
  background-color: #79ada2;
}

However, here the aim was to have the underline offset from the bottom of the heading and of an increased thickness.

Having split the underline away from the element (h3 in this instance) extra properties are accessible including: colour; thickness; gap size; width;

The border would be defined. Note can make the line the same length as the text or the full width. And can give insets.

Issues – what are they?

Defining the display as type block is important. As is ensuring that the content was set for the after pseudo element.

Matching the size of the underline to that of the text to avoid a gap which is too large, and thus diss-associating the underline from its text and crashing into the line of text on the next line (potentially less important for headings.

You may also wish to consider the use of a background rather than borders.