Text Underline offset behind text

Question

I want to show underline 50% behind the text. Like this

When I try using text-underline-offset with negative value, the underline will get hidden. But if the negative value is high enough it will be shown above the text instead.

I expect "Third Link" to show underline slightly behind text. Is there anything I can add to make it work?

The code are https://jsbin.com/kecuxitiha/edit?html,css,output

HTML


    Lorem Ipsum is simply dummy <a href="#" class="first">First Link</a> text <a href="#" class="second">Second Text</a> of 
      the printing and typesetting industry.  <a href="#" class="third">Third Link</a>
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

CSS

a {
  color: red;
  text-decoration-thickness: 6px;
  text-decoration-color: yellow;
}

.second {
  text-underline-offset: -21px;
}

.third {
  text-underline-offset: -4px;
}

score 5 · Accepted Answer · answered Jun 25 '21 at 06:59

5

Some creative use of pseudo elements can help solve this.

.underline::after {
  content: '';
  background-color: yellow;
  height: 12px;
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -8%;
  z-index: -1;
}
.underline {
  position: relative;
}
p {
  font-size: 1.5em;
}

<p>This is some text with a <span class="underline">special</span> underline</p>

answered Jun 25 '21 at 06:59

Celsiuss

895
7
19

it doesn't work :( – sshmaxime Nov 29 '22 at 11:22

mahan · Answer 2 · 2021-06-25T07:57:22.137

Relatively position the element itself. And absolutely position either it's ::before pseudo-element child or ::after for the yellow rectangle.

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.. https://developer.mozilla.org/en-US/docs/Web/CSS/::before

a {
  text-decoration: none;
  position: relative;
  color: red;
}

a::before {
  position: absolute;
  content: '';
  background: yellow;
  width: 100%;
  height: 50%;
  top: 50%;
  left: 0;
  z-index: -1
}

<p>
  Lorem Ipsum is simply dummy <a href="#" class="first">First Link</a> text <a href="#" class="second">Second Text</a> of the printing and typesetting industry. <a href="#" class="third">Third Link</a> Lorem Ipsum has been the industry's standard dummy
  text ever since the 1500s,
</p>

You may adjust the height and top properties.

Text Underline offset behind text

2 Answers2