1

Edited

My question is completely different from the duplicate question. I am talking about the underline should continue till the end of the text. No matter whether it's divided into one, two or three line

I have to show the underline below the anchor tag and I have tried the code below but am getting one issue. I have set the width 300px to the ul tag and anchor text divided into two parts but the underline not showing the divided text.

Output

enter image description here

Expected Output

I have to show underline below the "of mentoring" also

ul {
  width: 300px
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

ul li a {
  position: relative;
  font-size: 28px;
  line-height: 32px;
  color: #000;
}

ul li a:after {
  content: "";
  background-color: red;
  width: 100%;
  height: 10px;
  display: block;
  position: absolute;
  bottom: 5px;
  z-index: -1;
}
<ul>
  <li>
    <a href="">The role of mentoring</a>
  </li>

  <li>
    <a href="">Research backed benefits of mentoring</a>
  </li>

</ul>
Naren Verma
  • 2,205
  • 5
  • 38
  • 95
  • @savageGoat, do you mean it's not possible with CSS? – Naren Verma Apr 09 '23 at 12:15
  • `text-decoration` solution wins, hands down – savageGoat Apr 09 '23 at 12:43
  • @savageGoat, text-decoration will solve the problem but I don't want to use it.. i have customized the underline and I belive we can't customize the text-decoration – Naren Verma Apr 09 '23 at 14:58
  • it's limited but `text-decoration-color` sets the color and `text-decoration-thicknes` the height, but it's still plain CSS which is a better solution if the point is to make it simple. Otherwise you could use may solution for more advanced customizations – savageGoat Apr 09 '23 at 15:19
  • did you open the duplicate? or simply read the title? – Temani Afif Apr 14 '23 at 00:01

2 Answers2

1

This can be achieved using text-decoration and text-underline-offset :

ul {
  width: 300px;
  list-style: none;
}

ul li {
  list-style: none;
}

ul a {
  font-size: 28px;
  line-height: 32px;
  color: black;
  text-decoration-line: underline;
  text-decoration-thickness: 10px;
  text-decoration-color: red;
  text-underline-offset: -7px;
  text-decoration-skip-ink: none;
}
<ul>
  <li>
    <a href="">The role of mentoring</a>
  </li>
  <li>
    <a href="">Research backed benefits<br> of mentoring</a>
  </li>
</ul>
imhvost
  • 4,750
  • 2
  • 8
  • 10
-1

Since your underline is absolute, this should do the trick. Note that this is not the optimal solution since it strips the HTML tags inside the a element.

document.querySelectorAll(".underline").forEach((block) => {
  block.innerHTML = block
    .innerText
    .split(' ')
    .map((word) => `<span class="underline-wrap">${word}</span>`)
    .join(' ');
});
    ul {
      width: 300px
    }

    ul,
    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    ul li a {
      position: relative;
      font-size: 28px;
      line-height: 32px;
      color: #000;
    }
    ul li a.underline {
      display: inline-block;
      position: relative;
      overflow: hidden; /* hide excess of line produces by left: -10px; right: -10px;*/
    }
    ul li .underline-wrap { position: relative; }
    ul li .underline-wrap:after {
      content: "";
      background-color: red;
      height: 10px;
      display: block;
      position: absolute;
      bottom: 5px;
      left: -10px; /* fill gaps between words */
      right: -10px; /* fill gaps between words */
      z-index: -1;
    }
    <ul>
      <li>
        <a href="" class="underline">The role of mentoring</a>
      </li>

      <li>
        <a href="" class="underline">Research backed benefits of mentoring</a>
      </li>

    </ul>
savageGoat
  • 1,389
  • 1
  • 3
  • 10