Кратко
СкопированоСвойство text
позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.
text
часто встречается при работе со ссылками.
Пример
СкопированоСоздадим четыре абзаца текста. По одному для каждого из доступных значений свойства text
.
<div class="parent"> <p class="none">Диакритические знаки...</p> <p class="underline">В типографике...</p> <p class="line-through">Диакритическими знаками не могут...</p> <p class="overline">Черта сверху — типографический знак...</p></div>
<div class="parent"> <p class="none">Диакритические знаки...</p> <p class="underline">В типографике...</p> <p class="line-through">Диакритическими знаками не могут...</p> <p class="overline">Черта сверху — типографический знак...</p> </div>
.none { /* Значение по умолчанию, ничего не меняется */ text-decoration: none;}.underline { /* Нижнее подчёркивание */ text-decoration: underline;}.line-through { /* Перечёркнутый текст */ text-decoration: line-through;}.overline { /* Линия над текстом */ text-decoration: overline;}
.none { /* Значение по умолчанию, ничего не меняется */ text-decoration: none; } .underline { /* Нижнее подчёркивание */ text-decoration: underline; } .line-through { /* Перечёркнутый текст */ text-decoration: line-through; } .overline { /* Линия над текстом */ text-decoration: overline; }
Как понять
СкопированоПо факту свойство text
является шорткатом и позволяет указать значения для свойств:
text
— положение декоративной линии;- decoration - line text
— стиль декоративной линии;- decoration - style text
— цвет декоративной линии;- decoration - color text
— толщина декоративной линии.- decoration - thickness
Но, как правило, его используют только для указания положения линии.
Как пишется
СкопированоПоложение линии
СкопированоПишем свойство text
и после двоеточия указываем одно из доступных значений:
underline
— подчёркнутый текст.line
— перечёркнутый текст.- through overline
— надчёркнутый текст, линия находится над словами.none
— отменяет все эффекты.
Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.
Стиль линии
СкопированоНе многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.
Для управления стилем линии используются следующие ключевые слова:
solid
— сплошная линия. Значение по умолчанию.double
— двойная линия.dotted
— точечная линия.dashed
— пунктирная линия.wavy
— волнистая линия.
Управлять стилем подчёркивания обычно не требуется, но об этой возможности знать нужно.
Как будет выглядеть двойное перечёркивание:
p { text-decoration: line-through double;}
p { text-decoration: line-through double; }
Стиль линии можно указать отдельно при помощи свойства text
.
Цвет линии
СкопированоЦвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text
.
Мы можем изменить это значение, указав после ключевых слов типа и стиля линии код цвета в любом доступном в вебе формате.
Например, сделаем двойное подчёркивание красного цвета:
p { text-decoration: underline double #ff0000;}
p { text-decoration: underline double #ff0000; }
Цветом линии можно управлять отдельно при помощи свойства text
:
Толщина линии
СкопированоЧтобы изменить толщину линии, нужно указать значение в единицах измерения или применить ключевое слово from
, которое берёт величину из файла шрифта.
Если получить толщину из файла не удалось, то установится значение по умолчанию auto
. В таком случае браузер сам определит толщину линии.
Например, добавим тексту подчёркивание голубого цвета с толщиной в 5 пикселей:
p { text-decoration: underline solid #2e9aff 5px;}
p { text-decoration: underline solid #2e9aff 5px; }
Изменение толщины можно анимировать при помощи transition
.
Отдельно задать толщину линии можно с помощью свойства text
.
Подсказки
Скопировано💡 Свойство не наследуется.
💡 Значение по умолчанию для обычного текста — none
. Но для ссылок (<a>
) значение по умолчанию — underline
.
💡 Свойство text
целиком нельзя анимировать при помощи свойства transition
😒
Но можно анимировать цвет линии!
Пусть по умолчанию цвет линий будет совпадать с цветом текста, а по наведению курсора цвет будет меняться на другой за 0.3 секунды.
<p class="none">К диакритикам...</p><p class="underline">Дополнение подчёркивается...</p><p class="line-through">Эпанортозис...</p><p class="overline">В большинстве языков...</p>
<p class="none">К диакритикам...</p> <p class="underline">Дополнение подчёркивается...</p> <p class="line-through">Эпанортозис...</p> <p class="overline">В большинстве языков...</p>
p { transition: text-decoration-color 0.3s;}.none { text-decoration: none;}.underline { text-decoration: underline;}.line-through { text-decoration: line-through;}.overline { text-decoration: overline;}.dotted { text-decoration-style: dotted;}.double { text-decoration-style: double;}.wavy { text-decoration-style: wavy;}.blue:hover { text-decoration-color: #1a5ad7;}.red:hover { text-decoration-color: #ed6742;}.green:hover { text-decoration-color: #49a16c;}
p { transition: text-decoration-color 0.3s; } .none { text-decoration: none; } .underline { text-decoration: underline; } .line-through { text-decoration: line-through; } .overline { text-decoration: overline; } .dotted { text-decoration-style: dotted; } .double { text-decoration-style: double; } .wavy { text-decoration-style: wavy; } .blue:hover { text-decoration-color: #1a5ad7; } .red:hover { text-decoration-color: #ed6742; } .green:hover { text-decoration-color: #49a16c; }
💡 Если по дизайну для подчёркивания нужно задать отступ от текста, используйте свойство text
. Оно управляет положением линий со значением underline
по вертикали. Величину можно указать в единицах измерения: при положительном значении линия опустится, а при отрицательном — поднимется. Изменение положения линии можно анимировать через transition
.
💡 С помощью transition
, text
и изменения прозрачности цвета можно реализовать анимацию появления / пропадания линии.
На практике
Скопированосоветует Скопировано
🛠 До появления text
нельзя было изменить положение подчёркивания напрямую, поэтому использовались другие способы.
Например, свойство line
. Чем больше высота строки, тем ниже будет полоса подчёркивания.
Также можно полностью отказаться от text
и использовать border
или его логический аналог border
.
<header> <div class="container top"> <nav> <ul class="navigation"> <li class="navigation__item"> <a href="#" class="navigation__link">О магазине</a> </li> <li class="navigation__item"> <a href="#" class="navigation__link">О тыквах</a> </li> <li class="navigation__item"> <a href="#" class="navigation__link">О нас</a> </li> <li class="navigation__item"> <a href="#" class="navigation__link">Контакты</a> </li> </ul> </nav> </div> <div class="container"> <h1>Магазин «Резная тыква»</h1> </div></header>
<header> <div class="container top"> <nav> <ul class="navigation"> <li class="navigation__item"> <a href="#" class="navigation__link">О магазине</a> </li> <li class="navigation__item"> <a href="#" class="navigation__link">О тыквах</a> </li> <li class="navigation__item"> <a href="#" class="navigation__link">О нас</a> </li> <li class="navigation__item"> <a href="#" class="navigation__link">Контакты</a> </li> </ul> </nav> </div> <div class="container"> <h1>Магазин «Резная тыква»</h1> </div> </header>
.navigation__link, .navigation__link:visited { /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none;}.navigation__link:hover { /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor;}
.navigation__link, .navigation__link:visited { /* делаем элементы строчно-блочными */ display: inline-block; /* убираем подчёркивание */ text-decoration: none; } .navigation__link:hover { /* нивелируем размеры рамки */ padding-bottom: 20px; /* добавляем рамку снизу */ border-bottom: 4px solid currentColor; }
советует Скопировано
🛠 У ссылок по умолчанию задано подчёркивание. Если по дизайну оно не требуется, то нужно будет его сбросить — задать свойство text
. Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.
🛠 Отдельные свойства — text
, text
, text
и text
— редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.