Home >Web Front-end >CSS Tutorial >How to Create a Thick Underline Behind Text Using CSS Box Shadow?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-12-19 12:35:10576browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn