Revised
This question is distinct from the duplicate one. I am specifically addressing the issue of ensuring the underline continues until the end of the text, regardless of how many lines it spans.
The challenge I am facing is with displaying the underline below the anchor tag when the text is split into multiple lines. Despite setting the width of the ul tag to 300px and dividing the anchor text into two parts, the underline does not extend across both parts as desired.
Current Output
https://i.sstatic.net/trZm3.png
Desired Output
I need to display the underline beneath the phrase "of mentoring" as well.
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>