CODEWITHSUNDEEP
htmlcssunderline
exebook
exebook

Reputation: 33980

Thick underline behind text

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

thick underline behinde image

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>

Upvotes: 12

Views: 11258

Answers (9)

gowtham developer94
gowtham developer94

Reputation: 21

.item h2
{
  text-decoration:underline;
  text-decoration-thickness: 12px;
  text-decoration-color: yellow;
  text-decoration-skip-ink: none;
  text-underline-offset:-7px;
}
<div class="section-grid">
    <div class="item"><h2>Some text that might<br>have a line break</h2></div>
</div>

Upvotes: 2

imhvost
imhvost

Reputation: 10043

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.

Upvotes: 2

Turnip
Turnip

Reputation: 36732

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>

Upvotes: 15

Bala Ganesh
Bala Ganesh

Reputation: 1135

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>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106048

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>

Upvotes: 2

doğukan
doğukan

Reputation: 27559

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>

Upvotes: 6

tanc
tanc

Reputation: 321

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

enter image description here

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.

Upvotes: 10

K K
K K

Reputation: 18109

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.

Upvotes: 3

OxyDesign
OxyDesign

Reputation: 754

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

Upvotes: 5

Related Questions