Thick underline behind text

Question

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

Answer 1

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 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

Another possibility:

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

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

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

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

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

Answer 4

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;
}