Как сдвинуть underline ниже ссылки используя css?

Question

Нужно сделать underline ниже ссылки при наведении на неё, каким способом это можно осуществить?

<ul class="nav_list__content">
                    <a href=""><li class="nav_list__ul">Жилые комплексы</li></a>
                    <a href=""><li class="nav_list__ul">О компании</li></a>
                    <a href=""><li class="nav_list__ul">Контакты</li></a>
                    <a href=""><li class="nav_list__ul">Новости</li></a>
                    <a href=""><li class="nav_list__ul">Акции</li></a>
                    <a href=""><li class="nav_list__ul">Преимущества</li></a>
                </ul>

.nav_list__content{
    display: flex;
    padding-top: 50px;
    justify-content: center;
    font-family: 'Roboto';
    font-style: normal;
    font-size: 18px;
.nav_list__ul{
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.8s;
    
}
.nav_list__ul:hover{

    
}

Answer 1

Можно сделать используя border-bottom и padding-bottom

a {
  color: blue;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid blue;
  padding-bottom: 5px;
}

<a href="#" title="Жилые комплексы">Жилые комплексы</a>

Answer 2

именно underline - никак, она жестко зафиксирована,

но можно создать имитацию и использовать border-bottom и padding-bottom, которым и определить отступ

.link {
    text-decoration: none;
    display: inline-block;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
}

<div class = 'link'>ссылка</div>

` P.S.

стандартное подчеркивание лучше сбросить

text-decoration: none;

чтобы оно вдруг не помешало, если используются элементы с подчеркиванием, типа

<a class = 'link'>ссылка</a>

Answer 3

Можно опустить вот пример

<a class="text" href="#">test</a>

.text {
text-decoration: underline;
text-decoration-style: dashed;
text-underline-offset: 4px;
}

<a class="text">test</a>

text-underline-offset за это отвечает

БЛОГ НА HUSL

Как сдвинуть underline ниже ссылки используя css?

Ответы (3 шт):