6
<span>
    <a href="#" >TEXT</a>
</span>

span a  {
    text-decoration: underline;
}

Как можно увеличить отступ от линии подчеркивания в css?

6 ответов 6

9

С text-decoration: underline; такого не получится сделать. Нужно поставить text-decoration: none; и border-bottom: 1px #цвет_ссылки solid;. Вот хороший совет по теме.

2
  • Проблема возникнет только тогда, когда текст станет более чем в одну строку...тогда прийдёться потанцевать с бубном вокруг данной задачки
    – Keyl.in
    4 дек 2017 в 22:18
  • Проблема в том, что text-decoration оставляет оступы от букв до черты, а бордер подчёркивает всё, не глядя.
    – al-bulat
    1 июн 2021 в 16:10
1

В начале подумал что не походит выриант с бордером, так как заголовок может принимать ширину 100%, и тогда бордер ничем не отличается от hr.

прочитав следующий коммент про display:inline-block; помог сделать ширину заголовка, как бы по содержимому, остается только отцентрировать.

Дальше поигравшись и inline-block отставил в сторону, и применил table. Вот что получилось.

display: table;//ширина по тексту в заголовке
border-bottom: 1px solid #8edfce;//само подчеркивание
line-height: 36px;//высота строки, ну и соответственно отступ от подчеркивания
1

Я сам задался этим вопросом, но нашел такой вариант

.nav_link:hover {
    padding-bottom: 8px;
    border-bottom: 1.2px solid #4d4d4d;
    text-transform: capitalize;
}

Мне нужно было после наведения на ссылку, чтобы появлялось подчеркивание с высотой от строки 8px и шириной в слово. text-decoration: underline; не давал такой возможности, а нижняя граница вуаля))

1

Я справился с данной задачей следующим образом:

p {
   border-bottom: 1px solid black;
   height: 20px;
  }

Значение height будет определять на каком расстоянии от текста будет подчеркивание. При необходимости также нужно прописать "text-decoration: none", чтобы не получилось две линии подчеркивания.

1
  • Ого, какой старый вопрос. Посмотрите на css-свойство text-underline-offset
    – novvember
    14 апр 2022 в 13:43
0

для текста, но не блока использую: 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;
}
-1

На мой взгляд лучше использовать display:inline-block

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.