How to Create a Thick Underline Behind Text Using CSS Box Shadow?

Thick Underline Behind Text

Underlining text is a common styling technique used in web design. However, creating a thick, prominent line beneath text can be challenging. This issue addresses the challenge of not only underlining text, but placing the underline directly behind the text itself.

[Original Question]

How can you create an underline that appears behind the text using spans and CSS?

[Improved Answer]

An alternative approach to achieving a thick underline behind text is through the use of box shadow:

p {
  font-size: 100px;
  font-family: arial;
}

span {
  padding: 0 10px;
  box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
  box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
  box-shadow: inset 0 -0.7em 0 0 magenta;
}

<p>
  <span>A</span><span>B</span><span>C</span>
</p>

This method creates a shadow that gives the appearance of a thick line directly behind the text, without affecting the text's positioning or content.

The above is the detailed content of How to Create a Thick Underline Behind Text Using CSS Box Shadow?. For more information, please follow other related articles on the PHP Chinese website!