Question 42905 in Html Question posted in
Some basic documentation can be found here.

How to continue the underline if the text is divided into two part – Html

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

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search