Thick underline behind text

Question

How to reproduce this sort of underline behind the text ABC using spans and css?

I have been able to do underline below the text with nested span and colored border-bottom, but cannot get it behind the image and above the text base line.

<p style='font-size:100px'>
  <span style='border-bottom:30px magenta solid'><span>A</span></span>
  <span style='border-bottom:60px magenta solid'><span>B</span></span>
  <span style='border-bottom:90px magenta solid'><span>C</span></span>
</p>

Answer 1

Another possibility:

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>

Answer 2

Someone asked me about this design style today so I thought I'd look at options in 2020. Here is an example of the output with this technique (see snippet below):

The technique uses a background gradient on a nested span:

body {
  min-height: 100%;
  background: black;
  padding: 20px;
  color: white;
  font-family: sans-serif;
  font-size: 2em;
}

h1 {
  font-size: 50px;
  font-weight: bold;
}

h1.gradient span {
  background: linear-gradient(0deg, rgba(255,0,255,0) 0%, rgba(255,0,255,0) 16%, rgba(255,0,255,1) 16%, rgba(255,0,255,1) 41%, rgba(255,0,255,0) 41%);
}

h1.padding span {
  padding: 0 0.5em 0 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<h1 class="gradient padding"><span>This text has an 'underline' behind the text. It can wrap and it can have padding.</span></h1>

This allows the h1 to remain block level but applies the style to the inline element beneath it which allows the style to apply to the text and wrap on multiple lines. The 'underline' can be positioned by changing the linear-gradient stops.

If some horizontal padding is needed to make the underline stick out from the text on the left or right side more you can also use padding with box-decoration-break which will keep the padding across each wrapped line. box-decoration-break works on all modern browsers, see caniuse for details.

Answer 3

http://codepen.io/OxyDesign/pen/eHAac

With :before in absolute position

CSS

.underlined-text {
  font-size:100px;
}
.underlined {
  display: block;
  float:left;
  height:92px;
  position:relative;
}
.underlined:before {
  display: block;
  content:'';
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
  background:#f66;
  z-index:-1;
}
.underlined.first:before {
  height:15px;
}
.underlined.second:before {
  height:30px;
}
.underlined.third:before {
  height:45px;
}

Answer 4

We can use background and play with background-position-y

span {
  font: 36px sans-serif;
  /*                                         ↓ y position */
  background: linear-gradient(pink, pink) 0 90% / 100% 8px no-repeat;
  /*                                                    ↑ line height */
}

<span>Lorem ipsum</span>

More flexible version by using variables:

span {
  font: 36px sans-serif;
  background: linear-gradient(pink, pink) 0 var(--y-pos, 90%) / 100% var(--size, 8px) no-repeat;
}

<span>Lorem ipsum</span><br>
<span style="--y-pos: 70%;--size: 10px;">Lorem ipsum</span><br>
<span style="--y-pos: 50%;--size: 15px;">Lorem ipsum</span><br>
<span style="--y-pos: 100%;--size: 5px;">Lorem ipsum</span>

Answer 5

Try using background-position:

HTML:

<p style='font-size:100px'><span class="a">A</span><span class="b">B</span><span class="c">C</span>

CSS:

p>span {
    background-image: url(http://i234.photobucket.com/albums/ee79/xxjetaimmexx/pink.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
}
.a {
    background-size:100% 33%
}
.b {
    background-size:100% 50%
}
.c {
    background-size:100% 70%
}

Demo : http://jsfiddle.net/lotusgodkk/GCu2D/355/

Key is to alter the background-size of each span.

Answer 6

you can indeed use a gradient, the gradient can be animated and be drawn through a few lines inside an inline element.

p {
  font-size: 100px;
}

p span {
  background: linear-gradient(red, red)left bottom repeat-x;
  background-size: 35px 35px;
  transition:0.5s;
}

p span:nth-child(2) {
  background-size: 50px 50px;
}

p span:nth-child(3) {
  background-size: 65px 65px
}
p:hover span {
background-size: 0 0px;

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

<p><span>Aaa aaaaa aaaa aa aaaaaa aaaaaA</span><span>Bbbbb bbbb bbb  bb bbbbb bbb bbbb B</span><span>Cccccc cc ccc cccccccc cc ccccc  C</span></p>

Answer 7

Here is another trick

Play around with the line height and border values.

span{
  font-family: "arial", san-serif;
  font-size:32px;
  
  display:inline-block;
  border-bottom: 12px solid #50D3CB;
  line-height: 0.2;
}

<span>text to be underlined</span>

Answer 8

Use text-decoration + text-decoration-skip-ink: none; + negative text-underline-offset:

p {
  font-family: sans-serif;
  font-size: 48px;
  text-decoration:red underline 20px;
  text-underline-offset: -10px;
  text-decoration-skip-ink: none;
}

p span {
  text-decoration:green underline 30px;
  text-underline-offset: -20px;
}

<p>Lorem <span>ipsum</span> dolor sit amet,<br> consectetur <span>adipisicing</span> elit.<br> Quidem, repellendus.