Увеличение отступа от линии подчеркивания в css

Вопрос задан

Изменён 9 месяцев назад

Просмотрен 44k раза 

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

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

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

2

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

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

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

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

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

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

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

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

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

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

1

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

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

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

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

<ul>
                    <a href=""><li>Жилые комплексы</li></a>
                    <a href=""><li>О компании</li></a>
                    <a href=""><li>Контакты</li></a>
                    <a href=""><li>Новости</li></a>
                    <a href=""><li>Акции</li></a>
                    <a href=""><li>Преимущества</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{
    
}
  • html
  • css

Можно сделать используя 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>

1

именно 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>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

text-decoration — CSS: Каскадные таблицы стилей

Свойство text-decoration сокращенно CSS устанавливает внешний вид декоративных линий в тексте.

Это сокращение для text-decoration-line , text-decoration-color , text-decoration-style и более нового свойства text-decoration-thickness .

Текстовые декорации рисуются на дочерних текстовых элементах. Это означает, что если элемент определяет текстовое оформление, то дочерний элемент не может удалить оформление. Например, в разметке

В этом тексте есть некоторые выделенные слова.

, правило стиля p { text-decoration: underline; } приведет к подчеркиванию всего абзаца. Правило стиля em { text-decoration: none; } не вызовет никаких изменений; весь абзац все равно будет подчеркнут. Однако правило
em { text-decoration: overline; } приведет к появлению второго украшения на «некоторых выделенных словах».

Это свойство является сокращением для следующих свойств CSS:

  • цвет текста-декорации
  • строка оформления текста
  • стиль оформления текста
  • толщина оформления текста 
 украшение текста: подчеркивание;
оформление текста: обводка красная;
текстовое оформление: нет;
/* Глобальные значения */
оформление текста: наследовать;
оформление текста: инициал;
текстовое оформление: вернуться;
текстовое оформление: возвратный слой;
текстовое оформление: не задано;

Текст-украшение задается как одно или несколько значений, разделенных пробелами, представляющих различные свойства оформления рукописного текста.

Значения

текст-оформление-линия

Устанавливает тип используемого оформления, например подчеркивание или сквозное .

цвет оформления текста

Задает цвет украшения.

стиль оформления текста

Устанавливает стиль линии, используемой для оформления, например

сплошная , волнистая или пунктирная .

толщина оформления текста

Устанавливает толщину линии, используемой для оформления.

Исходное значение как каждое из свойств стенографии:
  • text-decoration-color : currentcolor
  • Стиль текста : Solid
  • Текстовая декорация : Нет
Applies to все элементы. Это также относится к ::first-letter и ::first-line .
Унаследовано нет
Вычисленное значение как каждое из свойств сокращения:
  • text-decoration-line : как указано
  • Стиль текста : как указано
  • как каждое из свойств стенографии:
    • text-decoration-color : цвет
    • text-decoration-style : дискретный
    • text-decoration-line : дискретный
    • text-decoration-thickness : по типу вычисляемого значения
 text-decoration = 
 <'text-decoration-line'> || 
 <'стиль оформления текста'> || 
 <'text-decoration-color'>

Демонстрация значений оформления текста 

 .under {
  оформление текста: подчеркивание красным;
}
.над {
  текст-декор: волнистый лаймовый обвод;
}
. линия {
  оформление текста: сквозное;
}
.простой {
  текстовое оформление: нет;
}
.под более {
  оформление текста: пунктирное подчеркивание надчеркивание;
}
.толстый {
  оформление текста: сплошное подчеркивание фиолетового цвета 4 пикселя;
}
.blink {
  оформление текста: мерцание;
}
 
 
Под этим текстом есть черта.


Этот текст перечеркнут.


В этом тексте есть линия.



  Эта ссылка не будет подчеркнута, так как ссылки
  обычно стоят по умолчанию. Будьте осторожны при удалении текстового оформления на
  якоря, так как пользователи часто полагаются на подчеркивание для обозначения гиперссылок.



В этом тексте есть строки над и под ним.

<р>
  В поддерживаемых браузерах этот текст выделен жирным фиолетовым подчеркиванием.


<р>
  Этот текст может мигать для вас, в зависимости от используемого вами браузера.
Спецификация
Модуль оформления текста CSS уровня 3
# text-decoration-property
B таблицы загружаются только в браузере с CD. Включите JavaScript для просмотра данных.

  • Индивидуальные свойства text-decoration: text-decoration-line , text-decoration-color , text-decoration-style и text-decoration-thickness .
  • Свойства text-decoration-skip-ink , text-underline-offset и text-underline-position также влияют на text-decoration, но не включены в сокращение.
  • Атрибут в стиле списка управляет внешним видом элементов в списках HTML
      и
        .

      Обнаружили проблему с содержанием этой страницы?

      • Отредактируйте страницу на GitHub.
      • Сообщить о проблеме с содержимым.
      • Посмотреть исходный код на GitHub.

      Хотите принять участие?

      Узнайте, как внести свой вклад.

      Последний раз эта страница была изменена участниками MDN.

      text-decoration-line — CSS: Каскадные таблицы стилей

      Свойство CSS text-decoration-line задает вид оформления, используемого в тексте в элементе, например подчеркивание или надчеркивание.

      При одновременной настройке нескольких свойств оформления линии удобнее использовать text-decoration сокращенное свойство вместо этого.

       /* Одно ключевое слово */
строка оформления текста: нет;
строка оформления текста: подчеркивание;
строка оформления текста: надчеркивание;
строка оформления текста: сквозная;
строка оформления текста: мерцание;
/* Несколько ключевых слов */
text-decoration-line: подчеркивание над чертой; /* Две линии оформления */
text-decoration-line: надчеркивание, подчеркивание, перечеркивание; /* Несколько декоративных строк */
/* Глобальные значения */
строка оформления текста: наследовать;
строка оформления текста: начальная;
строка оформления текста: вернуться;
строка оформления текста: слой возврата;
строка оформления текста: не задана;

      Свойство text-decoration-line указано как none или одно или несколько значений , разделенных пробелами, из списка ниже.

      Значения

      нет

      Не создает текстовое оформление.

      подчеркивание

      Под каждой строкой текста находится декоративная черта.

      над чертой

      Над каждой строкой текста есть декоративная линия.

      сквозной

      Каждая строка текста имеет декоративную черту, проходящую через ее середину.

      мигает Устаревший

      Текст мигает (поочередно видимый и невидимый). Соответствующие пользовательские агенты могут не мигать текстом. Это значение устарело в пользу анимации CSS.

      Исходное значение нет
      Применяется ко всем элементам. Это также относится к ::first-letter и ::first-line .
      Унаследован NO
      Вычисленное значение Как указано
      Тип
      Тип
      Тип
      .
      [ подчеркивание || надчеркивание || линейный || мигать ]

      Базовый пример 

       
      Вот текст, подчеркнутый волнистой красной линией!
      

      В этом тексте есть строки как сверху, так и снизу.
      
 
       .волнистый {
  строка оформления текста: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}
.оба {
  text-decoration-line: подчеркивание над чертой;
}
      Спецификация
      Модуль оформления текста CSS уровня 3
      # text-decoration-line-property

      Таблицы BCD загружаются только в браузере с включенным JavaScript.

      No related posts.

      Добавить комментарий

      Ваш адрес email не будет опубликован. Обязательные поля помечены *