Как продолжить подчеркивание, если текст разделен на две части [дубликат] ⇐ Html

[Anonymous]

Отредактировано
Мой вопрос полностью отличается от повторяющегося вопроса. Я говорю о том, что подчеркивание должно продолжаться до конца текста. Неважно, разделен ли он на одну, две или три строки.
Мне нужно показать подчеркивание под тегом привязки, и я попробовал приведенный ниже код, но у меня возникла одна проблема. Я установил ширину 300 пикселей для тега ul и текста привязки, разделенного на две части, но подчеркивание не показывает разделенный текст.
Вывод


Ожидаемый результат
Мне нужно также покажите подчеркивание под словом «наставничества».

Код: Выделить всё

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;
}

Код: Выделить всё

[list]
[*]
The role of mentoring

[*]
Research backed benefits of mentoring

[/list]

Подробнее здесь: https://stackoverflow.com/questions/759 ... o-two-part