text-decoration

Свойство CSS text-decoration – это короткая запись нескольких других свойств для создания у текста линий. Полные названия свойств такие:

  • text-decoration-line – определяет способ добавления линии: подчеркивание, перечеркивание, надчеркивание. Значения: line-through, overline, underline, none.
  • text-decoration-color – устанавливает цвет линии.
  • text-decoration-style – стиль линии. Значения: solid, double, dotted, dashed, wavy.
  • text-decoration-thickness – толщина линии.

Может быть указано несколько значений через пробел.

Пример использования (убираем у ссылки подчеркивание, которое есть по умолчанию):

a {
  text-decoration: none;
}

Если text-decoration: none у вас не работает, скорее всего эту инструкцию перебивает другая с более высоким приоритетом. Попробуйте повысить приоритет с помощью important таким образом: text-decoration: none !important.

Надо отметить, что с помощью text-decoration невозможно задать отступ от текста до линии. Что задать нужное расстояние до линии следует использовать сочетания свойств border (рамка вокруг элемента) и padding (внутренний отступ элемента). Их нужно применять к одной стороне, например: border-bottom (линия снизу) и padding-bottom (отступ сверху).

Еще несколько примеров, на которых наглядно видно применение свойств.

See the Pen
text-decoration
by Андрей (@adlibi)
on CodePen.

Прежде существовало еще одно значение свойства – blink, но в настоящий момент оно устарело и не поддерживается браузерами.

Оцените статью
Инструкции для Web
Добавить комментарии