Коротко: text-decoration: none убирает оформление текста — чаще всего подчёркивание у ссылок. Само свойство text-decoration задаёт линию под текстом, над ним или через него: underline, overline, line-through.
Значения text-decoration
| Значение | Что делает |
|---|---|
none |
убирает линию |
underline |
линия под текстом |
overline |
линия над текстом |
line-through |
зачёркнутый текст |
Убрать подчёркивание ссылки
a { text-decoration: none; }
/* вернуть подчёркивание при наведении */
a:hover { text-decoration: underline; }Это классический приём для меню: ссылка без линии, а при наведении появляется подчёркивание. Пользователь понимает, что элемент кликабелен.
Вкладки: тонкая настройка
a {
text-decoration-line: underline;
text-decoration-color: #003F8F;
}Отдельные свойства позволяют задать цвет линии независимо от цвета текста — так ссылка становится выразительнее.
.dotted { text-decoration-style: dotted; }
.wavy { text-decoration-style: wavy; }Линия может быть сплошной, пунктирной, волнистой или двойной. Волнистая часто используется для подсказки об ошибке в тексте.
a { text-underline-offset: 3px; }text-underline-offset отодвигает линию от текста, чтобы подчёркивание не «касалось» букв с выносными элементами.
Практика: оформить ссылки
- Решите, где ссылки должны быть с линией, а где без.
- Уберите подчёркивание через
text-decoration: none. - Добавьте подчёркивание или эффект при наведении.
- Настройте цвет и толщину линии.
- Проверьте ссылки внутри текста на заметность.
- Проверьте фокус с клавиатуры.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Подчёркивание не убирается | правило перебито | усилить селектор |
| Ссылки незаметны | убрана линия без замены | добавить цвет или эффект |
| Линия «слипается» с текстом | нет отступа | text-underline-offset |
| Зачёркивание не работает | неверное значение | line-through |
| Фокус не виден | убран контур | оставить видимый фокус |
Проверьте себя
text-decoration: none?
Вопросы и ответы
Скорее всего, другое правило с большим приоритетом возвращает линию, либо стиль браузера перебивает ваш. Проверьте селектор в инспекторе и усилийте его.
В меню и кнопках — нет. В обычном тексте — рискованно: ссылку станет трудно отличить от остального текста. Добавьте альтернативный признак кликабельности.
Оберните нужный фрагмент в <span> и задайте свойство ему. Так оформляют подсказки и выделения внутри строки.
Свойство отодвигает линию от текста. Помогает, когда подчёркивание задевает буквы с хвостиками вроде «у» или «д».
Итоги
text-decoration: noneубирает линию у текста и ссылок.- Значения
underline,overline,line-throughзадают тип линии. - Цвет и стиль линии настраиваются отдельными свойствами.
- Убирая подчёркивание, сохраните заметность ссылки.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.