Home >Web Front-end >CSS Tutorial >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!