7

span a {
  text-decoration: underline;
}
<span>
   <a href="#" >TEXT</a>
</span>

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

9 ответов 9

9

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

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

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

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

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

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

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

Вот так это можно реализовать.

span a {
  text-decoration: underline solid red 0.5px;
  text-underline-offset: 10px;
}
<span>
    <a href="#">TEXT</a>
</span>

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. Commented 20 сент. 2023 в 8:36
1

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

.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; не давал такой возможности, а нижняя граница вуаля))

1

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

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

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

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

Можно воспользоваться псевдоэлементом ::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>

0

Регулируемое подчеркивание над текстом:

text-decoration: underline 1px;
text-underline-offset: -100px;
-2

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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