Как подчеркнуть текст в css

Как подчеркнуть текст прямой, пунктирной, волнистой линией или, наоборот, убрать подчёркивание

Часто применяется при создании ссылок в виде кнопок или в виде пунктов меню, поскольку текстовые ссылки в браузерах подчёркиваются по умолчанию (выделение только цветом создаёт неудобство дальтоникам).

Ссылка подчёркивается при наведении

Пунктирное подчёркивание

Стиль текста CSS

  Стиль текста CSS

text-decoration

initial none solid currentcolor inherit наследует значение родителя unset none solid currentcolor
Свойство text-decoration не наследуется, применяется ко всем элементам

  
Свойство text-decoration не наследуется, применяется ко всем элементам

text-decoration-line

none убрать от текста линии underline подчеркнуть текст (снизу) overline провести линию над текстом (сверху) line-through зачеркнуть текст (посередине) spelling-error оформить как при орфографической ошибке (не поддерживается браузерами) grammar-error оформить как при грамматической ошибке (не поддерживается браузерами) initial none inherit наследует значение родителя unset none

Свойство text-decoration-line не наследуется, применяется ко всем элементам

  
Свойство text-decoration-line не наследуется, применяется ко всем элементам

Сделать линию над и под текстом

Стиль текста CSS

  Стиль текста CSS

text-decoration-style

solid одинарная прямая линия double двойная прямая линия dotted линия точками dashed прерывистая пунктирная линия wavy волнистая линия initial solid inherit наследует значение родителя unset solid

Свойство text-decoration-style не наследуется, применяется ко всем элементам

  
Свойство text-decoration-style не наследуется, применяется ко всем элементам

text-decoration-color

currentcolor цвет черты что у текста transparent черта полностью прозрачная (невидимая) red цвет черты ключевым словом #ff0000 или #ff0000ff цвет черты в формате HEX rgb(255,0,0) или rgba(255,0,0,1) цвет черты в формате RGB или RGBA hsl(0,100%,50%) или hsla(0,100%,50%,1) цвет черты в формате HSL() или HSLA() initial currentcolor inherit наследует значение родителя unset currentcolor

Свойство text-decoration-color не наследуется, применяется ко всем элементам

  
Свойство text-decoration-color не наследуется, применяется ко всем элементам

ВНИМАНИЕ! Нижестоящие свойства имеют плохую поддержку браузерами. Свойства text-underline-offset и text-decoration-width не реализованы вовсе и потому пока не рассмотрены в статье.

text-decoration-skip

objects черта пропускает картинки и inline-block-элементы none черта ничего не пропускает spaces черта пропускает пробелы и интервалы, созданные letter-spacing и word-spacing leading-spaces trailing-spaces edges черта немного не доходит до начала и конца элемента для того, чтобы два рядом стоящих элемента не были подчёркнуты единой линией box-decoration черта видна, если задана родителю, и пропускает области, созданные margin , padding и border initial objects leading-spaces trailing-spaces inherit наследует значение родителя unset наследует значение родителя

Свойство text-decoration-skip наследуется, применяется ко всем элементам .

 div < text-decoration: underline; text-decoration-skip: objects leading-spaces trailing-spaces; > code 
Свойство text-decoration-skip наследуется, применяется ко всем элементам  .

text-decoration-skip-ink

auto черта пропускает выступающие части символов (например, «хвостики» у букв «р» и «у») none черта не пропускает выступающие части символов (например, «хвостики» у букв «р» и «у») initial auto inherit наследует значение родителя unset наследует значение родителя

Свойство text-decoration-skip-ink наследуется, применяется ко всем элементам

  
Свойство text-decoration-skip-ink наследуется, применяется ко всем элементам

Пропуск выносных частей символов в подчеркиваемом тексте в Google Chrome

Пример подчёркнутого текста

  Пример подчёркнутого текста

Подчёркивание без пропусков выносных частей символов в Safari

Пример подчёркнутого текста

  Пример подчёркнутого текста

text-underline-position

auto автоматически (положение черты близко к базовой линии) under черта достаточно отдалена от базовой линии, чтобы не пересекать выступающие части символов left right initial auto inherit наследует значение родителя unset наследует значение родителя

Свойство text-underline-position наследуется (применяется ко всем элементам)

  
Свойство text-underline-position наследуется (применяется ко всем элементам)

Разница text-decoration и border

  text-decoration: underline;">Нижнее подчёркивание, сделанное text-decoration: underline;border-bottom: 1px solid;">Нижнее подчёркивание, сделанное border-bottom: 1px solid;

Свойство text-decoration подходит лучше для подчёркивания многострочного текста (при уменьшении экрана длинное слово также переходит на следующую строку при отзывчивой вёрстке). Свойство border активно использовали, когда не поддерживались свойства text-decoration-line , text-decoration-style и text-decoration-color .

• Мигающий текст на CSS
• Тень от текста на CSS
• Градиент текста на CSS
• Обводка текста на CSS

Fedor Timofeev Я видел еще интересное решение при подчеркивании ссылки. При наведении курсора линия подчеркивания появлялась и от середины слова/фразы начинала как бы убегать налево и направо в пределах ссылки, образуя подчеркивание. Вы можете такое реализовать? Здесь не буду пиарить сторонний ресурс. Кто хочет посмотреть пишите. Здесь особенно понравилось волнистое подчеркивание. Однозначно буду применять. А то уже почти решил отказаться от Вашей рассылки. NMitra Нижнее подчёркивание, сделанное с помощью background для inline-элемента

 .raz < background: linear-gradient(to top, currentcolor, transparent 1px) no-repeat bottom center / 0 auto content-box; text-decoration: none; transition: background-size 1s; >.raz:hover Нижнее подчёркивание, сделанное с помощью background для inline-элемента

Для блочного или inline-block-элемента лучше делать областью с помощью border

 .raz < display: inline-block; /* для длинных ссылок, которые размещаются на нескольких строчках */ position: relative; margin: 3px; /* отступ от ссылки, особенно актуально для адаптированных под сенсорные устройства сайтов, где нажать по коротким рядомстоящим ссылкам проблематично */ padding: 3px; padding: 3px; text-decoration: none; > .raz:active < /* вид активной ссылки */ background: #ccc; color: #fff; > .raz::after, .raz::before < /* появляющаяся при наведении рамка */ content: ""; position: absolute; /* выравнять по центру */ left: 0; right: 0; top: 0; bottom: 0; z-index: -1; margin: auto; border-style: solid; border-color: #808991; > .raz::before < height: 0; border-width: 0 1px; >.raz::after < width: 0; border-width: 1px 0; >.raz:hover::before < height: 100%; transition: .7s; >.raz:hover::after Для блочного или inline-block-элемента лучше делать областью с помощью border

Подчеркнутый текст на CSS

Существует несколько способов реализовать подчеркивание в CSS. Форматирование текста в CSS реализуется с помощью свойства text-decoration. Оно позволяет реализовать подчеркнутый текст в CSS. Для этого необходимо установить значение underline. Если текст родительского элемента уже подчеркнут, можно также использовать значение inherit.
Например, этот код сначала убирает подчеркивание (с помощю значения none) ссылки, а потом – добавляет, если посетитель сайта наводит на нее мышью.

     
Демонстрация свойства
   

Плюсы стандартного метода следующие:

1. Простота.
2. Может подчеркивать многострочный текст.
3. Используется на любом фоне.

Для примитивной реализации подчеркивания этого способа достаточно, но есть еще некоторые методы.

Другие способы подчеркивания в CSS

Стандартный метод хорош, но лишь для ограниченного количества возможностей. Так, с помощью этого метода невозможно изменять стиль линии. Также такое подчеркивание плохо выглядит на большом размере шрифта. Кроме этого, он не пропускает нижние выносные элементы почти в любом браузере (исключение – Safari для Mac и iOS).

border-bottom

Это старое свойство, позволяющее изменять нижнюю границу текста. Это свойство css подчеркивает текст пунктиром, сплошной линией и как душе угодно. Также метод позволяет регулировать толщину подчеркивания. Пример кода с использованием свойства border-bottom у строчных элементов.

      
 
 
Пунктирное подчеркивание 
 
Реализация подчеркивания синим цветом 
   

Результат интерпретации браузером этого кода.

Недостаток способа – подчеркивание осуществляется слишком низко по сравнению с текстом, поэтому линия (или пунктир) появляются уже под выносными элементами. Чтобы исправить это, можно использовать свойство text-shadow, использовав цвет фона в качестве цвета тени. Но выделение будет очень уродливым.
Также верстальщик имеет возможность применять переходы и анимации к подстрочной линии. Например, можно реализовать изменение цвета в течение какого-то времени. Если не использовать для пропуска выносных элементов свойство text-shadow, свойство может работать на любом фоне.

box-shadow

Это свойство использует две внутренние тени: первая рисует прямоугольник, а вторая прячет его часть. Метод может использоваться только на однотонном фоне. К этому свойству также можно добавить text-shadow для пропуска выносных элементов. Плюсы метода:

1. Возможность позиционировать подчеркивание ниже базовой линии.
2. Возможность изменять цвет и толщину линии.
3. Можно использовать вместе с многострочным текстом.

Но у этого способа есть недостатки. Прежде всего, ограниченность в фоне. Также невозможно регулировать стиль подчеркивания.
Пример кода:

.underline

background-image

Этот метод почти не имеет недостатков, а его потенциал воистину огромен. Идея проста – создание радиального градиента совместно со свойством background-position. Это позволит создать изображение, которое будет находиться под текстом и повторяться по всей длине строчки.
Чтобы реализовать работу данного подхода, необходимо прописать режим отображения display: inline;
Выглядит это так.

.dashed

Этот код, примененный к элементу, реализует подчеркивание длинным пунктиром. Если же точки остановки градиента установить в 50%, а не 75, то подчеркивание будет квадратиками. Свойство background-position в этом случае размещает фон под текстом, а background-repeat заставляет его повторяться.
Вместо градиента можно использовать готовое фоновое изображение и реализовать, например, подчеркивание звездочками.

Единственный недостаток – размер подчеркивания может отличаться в зависимости от используемого браузера, разрешения экрана и масштабирования.

Подчеркнутый текст HTML

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами ):

Конструктор сайтов "Нубекс"

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст — CSS

Как мы уже говорили в статье Зачеркнутый текст, декорации текста задаются при помощи свойства text-decoration. Подчеркнутый текст задается параметром underline:

     .underline 
Конструктор сайтов Нубекс"
  

Подчеркнуть текст с помощью CSS можно не только сплошной линией. Посмотрим, какими вариантами можно подчеркнуть текст:

Подчеркнуть текст пунктиром CSS:

     .dashed 
Конструктор сайтов Нубекс"
  

     .dotted 
Конструктор сайтов Нубекс"
  

     .double 
Конструктор сайтов Нубекс"
  

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Смотрите также:

• Шрифты CSS
• Тень текста
• Зачеркнутый текст HTML
• Жирный текст CSS
• Курсив CSS

text-decoration

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

text-decoration: [ blink || line-through || overline || underline ] | none | inherit

Значения

blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию. line-through Создает перечеркнутый текст ( пример ). overline Линия проходит над текстом ( пример ). underline Устанавливает подчеркнутый текст ( пример ). none Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. inherit Значение наследуется у родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Стратегическое нападение
  

Объектная модель

[window.]document.getElementById(» elementID «).style.textDecoration

[window.]document.getElementById(» elementID «).style.textDecorationBlink

[window.]document.getElementById(» elementID «).style.textDecorationLineThrough

[window.]document.getElementById(» elementID «).style.textDecorationNone

[window.]document.getElementById(» elementID «).style.textDecorationOverLine

[window.]document.getElementById( «elementID «).style.textDecorationUnderline

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit . Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.

CSS по теме