0

I'm trying to make my underline on a word thick and overlapping the word above it, sort of like a negative padded underline. Like how the word "maygha" is underlined in this image.

enter image description here

This is what I have right now:

span {
  border-bottom: 16px solid #a2c1f5;
}
<h1> hi there! <br> i'm <span> maygha!</span></h1>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
ags
  • 43
  • 6
  • 1
    Use a negative ```margin-bottom``` so that the "hitbox" of the span is higher. Now your ```border-bottom``` has the ability to touch the text. –  Feb 28 '21 at 17:03

4 Answers4

3

Simply, use ::after like this

h1 {
  font-size: 2rem;
}

h1 span {
  display: inline-block;
  position: relative;
}

h1 span::after {
  content: '';
  position: absolute;
  bottom: 20%;
  left: 0;
  height: .5rem;
  width: 100%;
  background: red;
  z-index: -1;
}
<h1> hi there! <br> i'm <span> maygha!</span></h1>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Md.Usman Ansari
  • 139
  • 6
1

Another possibility is to use background-position-y. Thanks to @doğukan for the excellent answer.

span {
  background: linear-gradient(#cfddff, #cfddff) 0 70% / 100% 10px no-repeat;
}
<h1> hi there, <br> i'm <span> maygha!</span></h1>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
0

I would combine inline-block for the span with adjusting its height in relation to the font size using ems

span {
    border-bottom: 10px solid rgba(0, 0, 255, .5);
    display: inline-block;
    height: 0.7em;
}
<h1>
My <span>text</span>
</h1>
ccarstens
  • 419
  • 3
  • 13
0

One way of doing it is through box-shadow as you can see in the following snippet. The downside is you need to give an alpha component to the color of the shadow.

span {
  box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .5)
}
<h1> hi there! <br> i'm <span> maygha!</span></h1>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
bavShehata
  • 133
  • 8