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

Содержание:

А давай-ка вот этим подчеркнем!
Как сделать подчеркнутый текст в css?
- - Инструкция
Подчеркнутый текст через css.
Подчеркнутый текст html с помощью тега.
Подчёркивание текста

, линия будет не под текстом, а занимать всю ширину элемента.

А давай-ка вот этим подчеркнем!

В языке html существуют специальный парный тег для подчеркивания текста: слово.

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

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

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

Не забывайте, что всегда можно повторить стилевые настройки блока-родителя при помощи ключевого слова inherit.

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

В таком языке как css подчеркнутый текст также выделить нетрудно. Сделать это можно с помощью свойства text-decoration: underline;, помещенного в соответствующий селектор.
Свойство text-decoration: overline; проводит линию над текстом.
А text-decoration: none; позволяет отменить выбранные настройки и возвращает текст в изначальный вид.

Как убрать красное, зеленое и синее подчеркивание в ворде

Подчеркивание — один из элементов форматирования текста, который позволяет улучшить понимание смысла написанного, выделяя его наиболее важные части. В текстовом процессоре Microsoft Office Word выделять слова этим методом можно разными способами, получая при этом разные варианты подчеркивания.

Инструкция

Запустите Word, откройте в нем нужный документ и выделите слово, которое требуется подчеркнуть.

Кликните по кнопке с изображением подчеркнутой буквы «Ч» в меню текстового процессора — на вкладке «Главная» она помещена в группу команд «Шрифт». Можно вместо этого использовать и сочетание клавиш Ctrl + U, результат будет одинаков — Word подчеркнет выделенное слово.

Если слово, которое надо подчеркнуть, еще не набрано, можно произвести описанную манипуляцию — кликнуть по кнопке или нажать сочетание клавиш — заранее, перед вводом слова. В этом случае вам нужно не забыть проделать то же самое повторно после окончания набора выделяемого текста — чтобы отключить режим подчеркивания.Кроме стандартного подчеркивания одной линией в Word есть и другие варианты. Чтобы выбрать один из них — пунктирную линию, штрих-пунктирную, двойную и т.д. — вместо щелчка по самой кнопке с буквой «Ч» кликните метку у ее правого края. Эта метка открывает выпадающий список с перечнем возможных вариантов оформления линии. Последняя строка в этом списке — «Цвет подчеркивания» — открывает подраздел, где вы можете указать и цвет окраски выбранной линии.Если вы выделите какой-то фрагмент текста и воспользуетесь одной из описанных выше опций, подчеркнутым окажется весь этот фрагмент, включая и пробелы. В текстовом процессоре есть возможность задать вариант подчеркивания, при котором линия будет помещена только под словами, а пробелы останутся в своем стандартном виде. Чтобы воспользоваться этим вариантом после выделения нужного фрагмента кликните его правой кнопкой мыши и выберите в контекстном меню строку «Шрифт». В поле «Подчеркивание» открывшегося окна установите значение «Только слова». После этого станет доступно изменение значения в поле «Цвет подчеркивания» — если это необходимо, выберите в нем нужный цвет. Нажмите OK, и Word подчеркнет слова.

Возможно, будет полезно почитать:

Создать формат оглавления в word ;
Как зарядить планшет от компьютера ;
Подготавливаем заголовки с применением встроенных стилей ;
Что делать с разбитым планшетом ;
Параметры страницы в Word ;
Экран планшета во время работы стал черным что делать ;
Электронное содержание в ворде ;
Подключение телефона или планшета к телевизору ;

При работе с текстовыми документами в программе Microsoft Word иногда возникает необходимость сделать подчеркивание без текста. Например, это может понадобиться для того чтобы оставить место для подписи или текста, который должен заполнятся от руки.

К счастью, в редакторе Word есть немало способов, как это можно реализовать. В данной статье мы рассмотрим 4 таких способа. Материал будет актуален для всех современных версий Microsoft Word, включая Word 2007, 2010, 2013 и 2016.

Последний способ сделать подчеркивания без текста – это вставка фигуры, которая называется «Линия». Для того чтобы воспользоваться этим способом нужно перейти на вкладку «Вставка», нажать на кнопку «Фигуры» и выбрать фигуру «Линия».

После этого ваш курсор превратится в крест, это означает что вы можете нарисовать фигуру. Для того чтобы линия получилась прямой зажмите клавишу SHIFT на клавиатуре и не отпуская ее нарисуйте горизонтальную линию.

По умолчанию, линия получится синей. Для того чтобы изменить ее цвет, выделите ее и перейдите на вкладку «Формат» и измените стиль линии.

Также на вкладке «Формат» можно изменить и другие настройки линии. Например, здесь можно добавить к линии дополнительные эффекты. Для этого нужно нажать на кнопку «Эффекты фигур» и в открывшемся меню выбрать один из предложенных эфектов.

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

Подчеркнутый текст через css.

Красивое css подчеркивание элементов

Как вы знаете есть — не будем использовать все, возьмем лишь один:

Нам потребуется очередной текст:

Опять же новый текст, для нового пункта подчеркивания текста.

Две строки для испытания свойства , как оно будет работать.

Оборачиваем данный текст в тег div.

Прописываем ему attribute style.

Со свойством и значением «».<div style=»text-decoration:underline»>

Опять же новый текст, для нового пункта подчеркивания текста.
Две строки для испытания свойства , как оно будет работать.

</div>
Смотрим результат:

Опять же новый текст, для нового пункта подчеркивания текста.

Две строки для испытания свойства , как оно будет работать.

Подчеркнутый текст html с помощью тега.

Как убрать подчеркивание в word: несколько способов

Подчеркнуть текст через html

Для этого нам понадобится какой-то текст:

Желательно, чтобы в нём, в тексте было пару абзацев, чтобы можно было вживую увидеть, как данный тег будет подчеркивать текст.

В особенности при переходе на следующий абзац.

После этого оборачиваем данный текст в тег для «подчеркивания ния текста html» :

<u>Желательно, чтобы в нём, в тексте было пару абзацев, чтобы можно было вживую увидеть, как данный тег будет подчеркивать текст.

В особенности при переходе на следующий абзац.</u>

Результат подчеркивания текста html с помощью тега

В особенности при переходе на следующий абзац.

Вывод:

Какой мы здесь видим результат и какой вывод можем сделать!?

Что текст прекрасно подчеркивается с помощью тега!

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

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

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

Подчёркнутый текст читается хуже, чем обычный. С учётом того, что чтение с экрана по сравнению с чтением с листа бумаги менее комфортно, данный фактор становится важным для повышения удобства восприятия информации.
На веб-страницах подчёркивание ссылок стало определённым стандартом. Когда мы видим на сайте подчёркнутый текст, то воспринимаем его в силу привычки как ссылку. Если это не так, возникает раздражение: почему этот текст выглядит как ссылка, но при этом ссылкой не является?

Получается, что если включить подчёркивание, то оно должно быть либо декоративным, чтобы не возникала ассоциация со ссылками, либо применяться для небольших текстов, например заголовков. Но и в этом случае текст должен оставаться самим собой и не восприниматься как ссылка.

Для добавления подчёркивания есть два основных метода. Первый заключается в использовании свойства text-decoration со значением underline, как показано в примере 1.

Пример 1. Свойство text-decoration

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
.dot {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 class=»dot»>Часть 4, в которой Пол и
Пропилен наносят ответный удар</h1>
</body>
</html>

Результат данного примера показан на рис. 2. Цвет и толщина такой линии устанавливаются браузером самостоятельно в зависимости от размера и цвета текста и не могут быть изменены через стили. Кстати, это же свойство со значением none применяется для того, чтобы убрать подчёркивание у текста, например, у ссылок.

Рис. 2. Вид линии, полученной с помощью text-decoration

Второй метод позволяет установить линию произвольного стиля и цвета через свойство border-bottom. Например, для добавления пунктирного подчёркивания у ссылок используем значение dashed. Чтобы подчёркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовём его, скажем dot. Также необходимо убрать исходное подчёркивание у ссылок (пример 2).

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

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Пунктирное подчёркивание</title>
<style>
a.dot {
text-decoration: none; /* Убираем подчёркивание */
border-bottom: 1px dashed #000080; /* Добавляем свою линию */
}
</style>
</head>
<body>
<p><a href=»link1.html»>Обычная ссылка</a> на другую страницу.</p>
<p><a href=»link2.html» class=»dot»>Ссылка с пунктирным подчёркиванием</a>.</p>
</body>
</html>

Результат примера показан на рис. 3.

Рис. 3. Вид обычной ссылки и ссылки с пунктирным подчёркиванием

Толщина линии и цвет подчёркивания у ссылок также задаются через свойство border-bottom

Обратите внимание на некоторые моменты. Линия, полученная через border-bottom, располагается чуть ниже традиционного подчёркивания

При добавлении такой линии к блочным элементам, вроде

, линия будет не под текстом, а занимать всю ширину элемента.

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

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

Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).

Пример 1. Отсутствие подчёркивания у ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
text-decoration: none; /* Убираем подчёркивание */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.

Подробно о зачеркивании/перечеркивании текста в html:

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

У нас есть какой то текст, который надо зачеркнуть.

Пусть это будет текст, который надо зачеркнуть в html.

Берем данный тег

Оборачиваем данный текст в тег:

Html:<s>Пусть это будет текст, который надо зачеркнуть в html. </s>

~~Пусть это будет текст, который надо зачеркнуть в html.~~
Вывод:

Как видим, наш текст прекрасно зачеркнулся!
Теперь возьмем второй тег , который также зачеркивает текст.

Проделаем абсолютно те же операции, что в выше идущем пункте:

Во второй раз нам потребуется текст, который нужно зачеркнуть.

Здесь второй текст, который будем зачеркивать вторым тегом

Берем второй тег

Опять оборачиваем наш текст тегом:

Html:<del>Здесь второй текст, который будем зачеркивать вторым тегом </del>

~~Здесь второй текст, который будем зачеркивать вторым тегом~~
Вывод:

Как видим, наш текст прекрасно зачеркнулся, и никакой разницы между первым зачеркнутым вторым зачеркнутым текстом нет!
Мы дошли до третьего тега , который тоже может зачеркивать текст.

Повторяем пройденное выше:

Для зачеркивания текста нам нужен текст:

Здесь третий текст, который будем зачеркивать третьим тегом

Берем третий тег

Опять оборачиваем наш текст тегом:

Html:<del>Здесь третий текст, который будем зачеркивать третьим тегом </del>

~~Здесь третий текст, который будем зачеркивать третьим тегом~~
Вывод:

Результат предсказуемый! Текст сделался перечеркнутым!
В этот раз, не будем использовать теги:

Будем использовать css.

Нам понадобится свойство rd.

Со значением

И не забываем про , для примера используем данное свойство и значение прямо в теге:

И да мы забыли про текст:

Текст номер 4, который будем зачеркивать с помощью css

Добавим тег span.

Туда впишем attribute style с и

Соберем весь код вместе:

Html:<span style=»text-decoration:line-through»>Текст номер 4, который будем зачеркивать с помощью css</span>
Результат:Текст номер 4, который будем зачеркивать с помощью css
Вывод:

Что следовало и ожидать — текст прекрасно зачеркнут!
На самом деле — эти два слова, зачеркнуть и перечеркнуть имеют один и тот же смысл.

Для нас главная разница, по какому из запросов приходят больше или меньше!

Начнем с меньшего!

html перечеркнутый 281

перечеркнутый текст html 243

html тег перечеркнутый текст 22

+как сделать текст перечеркнутым html 11

html код перечеркнутый текст 7

Итого : получается, что количество запросов в месяц, где встречается слово «перечеркнутый» — 564 запросов в месяц.

зачеркнутый html 656

зачеркнутый текст html 549

html тег зачеркнутый текст 39

зачеркнутый тег +в html 20

+как сделать зачеркнутый текст +в html 18

html зачеркнуть слово 17

зачеркнутый шрифт html 16

html код зачеркнутый текст 15

зачеркнутый текст html css 9

html зачеркнутая цена 7

Итого получается, что количество запросов в месяц, где встречается слово «зачеркнутый» — 1346 запросов в месяц.

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

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

border-bottom

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

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

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

box-shadow

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

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

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

background-image

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

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

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

Подчёркивание ссылок при наведении на них курсора мыши

Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration: none, следует воспользоваться псевдоклассом :hover. Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).

Пример 2. Подчёркивание ссылок

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Подчеркивание текста

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору H1 (пример 2).

Пример 2. Линия на ширину текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Подчеркивание заголовка

В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.

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

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

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

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

Вариации подчеркивания

Подчеркивание ссылок или любых других элементов, можно придумать какое угодно. Подчеркивание может всплывать снизу, выезжать слева или справа и т.д. Мы рассмотрим более интересный пример, в котором подчеркивание будет разъезжаться от центра к краям, как на демонстрации ниже.

демонстрация подчеркивания

HTML

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

<a href="#">demo ссылка</a>

CSS

Реализация будет заключаться в двух линиях, которые будут разъезжаться от середины нижней части элемента к его краям.

За подчеркивание у нас отвечает свойство , но применять его здесь не имеет смысла, потому как воплотить наши планы по анимации в таком случае не совсем актуально. Не будем забывать, что каждому элементу можно присвоить псевдоэлемент или . Поэтому все свойства будем задавать именно им, а нашей ссылке сразу же задаем следующие параметры:

a{
   display: inline-block;
   position: relative;
   text-decoration: none;
}

Таким образом мы задали блочную обтекаемость и позиционирование относительно исходного места. Все это делается для того, чтобы подчеркивание не вылезало за пределы элемента, когда мы псевдоэлементу назначим абсолютное позиционирование. После этого нам необходимо задать его четкое расположение и размер. И тут мы сразу же создаем первую половину подчеркивания.

a::before{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out, left .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Т.е. высота линии подчеркивания будет 2px, длина 0, красного цвета, а за анимацию отвечает свойство . Ну и конечно же, отступ слева на 50%, т.е. центральная точка. Практически те же действия производим и с псевдоэлементом :

a::after{
   display: block;
   position: absolute;
   content: "";
   height: 2px;
   width: 0;
   background-color: red;
   transition: width .5s ease-in-out;
   left: 50%;
   bottom: 0;
}

Дальше нам остается только добавить эффект при наведении мышки на ссылку.

a:hover::before{
   width: 50%;
   left: 0;
}
a:hover::after{
   width: 50%;
}

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

css11

(18 голосов, в среднем: 4.7 из 5)

не скупись ставь лайк
Подписка на обновления:

border-bottom

Этот метод тоже можно отнести к стандартному. Многие его применяют, когда хотят отделить подчеркивание от текста. Наглядный пример:

Подчеркнутый текст и дополнительные содержание

Что нужно сделать?

HTML:

<a href="javascript::">Подчеркнутый текст</a>

CSS:

a {
     border-bottom: 1px solid #268ccc;
}

Однако рассмотренные методы имеют 2 минуса:

в первом случае: подчеркивающая линия находится слишком близко к нужному тексту;
во втором случае: подчеркивающая линия находится слишком далеко от нужного текста.

Чтобы решить эти проблемы Вы можете воспользоваться двумя оставшимися методами. Применяйте тот, который больше нравится Вам.

Использование фонового цвета

Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background, присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover, тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).

Пример 5. Фон под ссылкой

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ссылки</title>
<style>
a {
padding: 2px; /* Поля вокруг текста ссылки */
text-decoration: none; /* Убираем подчёркивание */
}
a:hover {
background: #f73; /* Цвет фона при наведении на ссылку курсора */
color: yellow; /* Новый цвет текста */
}
</style>
</head>
<body>
<p><a href=»link.html»>Ссылка без подчёркивания</a>
</body>
</html>

Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding, создающее поля вокруг текста (рис. 2).

Рис. 2. Изменение цвета фона при наведении на ссылку курсора

Подчеркивание в CSS

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

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

Следует помнить, что названия классов всегда прописываются латиницей.

Оформление может быть сделано и с помощью границ. Границы позволяют сделать как обычное (сплошное) подчеркивание, так и пунктирное. Для этого прописываются необходимые свойства границ, но убирается свойство декорации текста.

Затем текст украшается при помощи следующего свойства:

Так выходит декорирование с пунктирной линией. Чтобы сделать ее сплошной, вместо «dashed» применяется «solid». Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить «dotted».

Стили рамок прописываются в одну строку. Кроме типа подчеркивания, нужно еще указать толщину подчеркивания и цвет. Чтобы определиться с размером, можно поэкспериментировать, но обычно достаточно 1 или 2 пикселей. Цвет текста тоже можно сделать в цвет подчеркивания:

Так получится синий текст с синим оформлением. Чтобы присоединить стиль к html, нужно в разметку добавить класс.

Свойства text-decoration-*

Это свойство прекрасно работает само по себе, но можно добавить несколько экспериментальных свойств для настройки внешнего вида:

text-decoration-color;
text-decoration-skip;
text-decoration-style.

Только не радуйтесь раньше времени. Помните о проблеме поддержки браузерами.

TEXT-DECORATION-COLOR

Позволяет изменить цвет CSS подчеркивания пунктиром отдельно от цвета текста. Данное свойство хорошо поддерживается браузерами. Оно работает в Firefox и с помощью префикса в Safari. Но если не обрабатывать разрывы ниже базовой линии текста, то Safari поместит подчеркивание поверх текста.

Firefox:

Safari:

TEXT-DECORATION-SKIP

Это свойство добавляет разрывы ниже базовой линии:

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

TEXT-DECORATION-STYLE

Данное свойство предлагает те же типы подчеркивания текста CSS, которые можно задать с помощью border-style. И кроме этого добавляет тип линии wavy (волнистая).

Ниже приводятся различные значения, которые можно использовать:

dashed;
dotted;
double;
solid;
wavy.

На данный момент text-decoration-style работает только в Firefox, вот скриншот:

Варианты стилей однотонного подчеркивания

Выглядит знакомо, не правда ли?

Новые свойства text-decoration

Вы помните, что я обещал подробнее поговорить о text-decoration . Время пришло.

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

text-decoration-color
text-decoration-skip
text-decoration-style

Но слишком сильно не радуйтесь… Поддержка в браузерах — как всегда. Такие дела.

text-decoration-color

Свойство text-decoration-color позволяет вам изменять цвет подчеркивания отдельно от цвета текста. Поддержка этого свойства лучше, чем можно было ожидать — оно работает в Firefox и с префиксом в Safari. Вот в чем загвоздка: если у вас есть выносные элементы, Safari поместит подчеркивание поверх текста.

text-decoration-skip

Свойство text-decoration-skip включает пропуск выносных элементов в подчеркиваемом тексте.

Это свойство нестандартное и работает сейчас только в Safari, с префиксом -webkit- . Safari по умолчанию активирует это свойство, поэтому выносные элементы всегда не перечеркиваются.

Если вы используете Normalize, то учтите, что последние версии отключают это свойство ради последовательного поведения браузеров. И если вы хотите, чтобы подчеркивание не затрагивало выносные элементы, вам надо вручную активировать его.

text-decoration-style

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

Вот список доступных значений:

dashed
dotted
double
solid

Сейчас свойство text-decoration-style работает только в Firefox, вот скриншот из него:

Чего не хватает

Серия свойств text-decoration-* намного более интуитивна в использовании, чем остальные свойства CSS для оформления подчеркивания. Но если взглянуть внимательнее, то для удовлетворения наших запросов не хватает способов задать толщину или позицию линии.

После небольшого исследования, я нашел еще пару свойств:

text-underline-width
text-underline-position

Судя по всему, они относятся к ранним черновикам CSS, но их так и не реализовали в браузерах из-за отсутствия интереса.

Заключение

В заключение хотелось бы вынести все примеры в один блок, чтобы возможно было понять разницу всех этих методов.

text-decoration:

Подчеркнутый текст и дополнительные содержание

border-bottom:

Подчеркнутый текст и дополнительные содержание

a>span:

Подчеркнутый текст и дополнительные содержание

linear-gradient:

Подчеркнутый текст и дополнительные содержание

А какой метод подчеркивания текста применяете Вы чаще всего? Например, я чаще всего использую третий способ, однако и четвертый очень сильно помогает, когда по макету требуется сделать линию не такой яркой, как сам текст.