span a {
text-decoration: underline;
}
<span>
<a href="#" >TEXT</a>
</span>
Как можно увеличить отступ от линии подчеркивания в css
?
С text-decoration: underline;
такого не получится сделать.
Нужно поставить text-decoration: none;
и border-bottom: 1px #цвет_ссылки solid;
.
Вот хороший совет по теме.
для текста, но не блока использую: text-underline-offset
p {
font-family: $main-font;
font-size: 20px;
font-weight: 600;
line-height: 22px;
color: $accent-color;
text-decoration: underline;
text-underline-offset: 10px;
}
Я справился с данной задачей следующим образом:
p {
border-bottom: 1px solid black;
height: 20px;
}
Значение height будет определять на каком расстоянии от текста будет подчеркивание. При необходимости также нужно прописать "text-decoration: none", чтобы не получилось две линии подчеркивания.
text-underline-offset
Commented
14 апр. 2022 в 13:43
Вот так это можно реализовать.
span a {
text-decoration: underline solid red 0.5px;
text-underline-offset: 10px;
}
<span>
<a href="#">TEXT</a>
</span>
Я сам задался этим вопросом и нашел такой вариант:
.nav_link:hover {
padding-bottom: 8px;
border-bottom: 1.2px solid #4d4d4d;
text-transform: capitalize;
}
<span class="nav_link">TEXT<span>
Мне нужно было, чтобы после наведения на ссылку появлялось подчеркивание с отступом от строки 8px
и шириной в слово. text-decoration: underline;
не давал такой возможности, а нижняя граница вуаля))
В начале подумал, что не подходит вариант с border
, так как заголовок может принимать ширину 100%
, и тогда бордер ничем не отличается от <hr>
.
Прочитав следующий комментарий про display:inline-block;
, помог сделать ширину заголовка, как бы по содержимому, остается только отцентрировать.
Дальше, поигравшись, и inline-block
отставил в сторону, и применил table
. Вот что получилось:
display: table; /* ширина по тексту в заголовке */
border-bottom: 1px solid #8edfce; /* само подчеркивание */
line-height: 36px; /* высота строки, ну и, соответственно, отступ от подчеркивания */
Можно воспользоваться псевдоэлементом ::after
. Он позволяет более гибко настраивать линию под текстом.
a {
/* Уберем цвет и подчеркивание по умолчанию для ссылок */
color: inherit;
text-decoration: none;
display: inline-block;
}
a::after {
/* Отступ между текстом и линией */
margin-top: 5px;
/* Толщина линии */
height: 1px;
/* Цвет линии будет таким же, что и цвет текста */
background-color: currentColor;
content: "";
display: block;
}
<a href="#">TEXT</a>
Регулируемое подчеркивание над текстом:
text-decoration: underline 1px;
text-underline-offset: -100px;