Home > Web Front-end > CSS Tutorial > How Can I Create a Thick Underline Behind Text Using CSS?

How Can I Create a Thick Underline Behind Text Using CSS?

Barbara Streisand
Release: 2024-12-24 02:33:14
Original
402 people have browsed it
<p>How Can I Create a Thick Underline Behind Text Using CSS?

<p>Creating a Thick Underline Behind Text with CSS

<p>To achieve the effect of a thick underline behind text using spans and CSS, there are a few techniques you can employ:

<p>Option 1: Nested Spans

<p>This approach involves nesting a series of spans, each with increasing bottom borders in size and color:

<p>
Copy after login
<p>Option 2: Box Shadow

<p>Another option is to use box shadow to create the underline:

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;
}
Copy after login
<p>
  ABC

Copy after login
<p>With these methods, you can create the illusion of a thick underline behind your text, either above or below the baseline.

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

source:php.cn
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template