Как подчеркнуть в 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 по теме

Подчеркивание, зачеркивание текста в CSS: свойство text-decoration

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

Значение	Что делает
underline	Нижнее подчеркивание текста
overline	Верхнее подчеркивание текста
line-through	Зачеркивание текста
blink	Мигание текста
none	Удаление всех эффектов
inherit	Наследование значений родителя

Пример записи стиля:

Применяя свойство text-decoration в CSS, следует соблюдать чувство меры и некоторые рекомендации. Перед использованием значения underline не для гиперссылки убедитесь, что текст на веб-странице не будет на нее похож. Многие пользователи воспринимают подчеркнутый текст как ссылку. Чтобы более гибко настроить стиль и иметь возможность изменять толщину, вид и цвет полосы подчеркивания, можно использовать свойство border (подробнее о нем мы будем говорить чуть позже).

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

Значение blink (мигание текста) хоть и внесено в таблицу, на данный момент не поддерживается браузерами.

Скриншот с примерами использования стиля:

Далее в учебнике: установка тени для текста при помощи свойства CSS text-shadow.

text — decoration

Добавляем любому тексту чёрточку. Или убираем, где она есть, но не нужна.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Егор Левченко ,
• Светлана Коробцева

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — decoration позволяет добавить декоративные линии тексту. Текст можно подчеркнуть, перечеркнуть или добавить линию над текстом.

text — decoration : underline часто встречается при работе со ссылками.

Пример

Скопировать ссылку «Пример» Скопировано

Создадим четыре абзаца текста. По одному для каждого из доступных значений свойства text — decoration .

   
Диакритические знаки.
  
В типографике.
  
Диакритическими знаками не могут.
  
Черта сверху — типографический знак.
   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 — decoration является шорткатом и позволяет указать значения для свойств:

• text — decoration — line — положение декоративной линии;
• text — decoration — style — стиль декоративной линии;
• text — decoration — color — цвет декоративной линии.

Но, как правило, его используют только для указания положения линии.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Положение линии

Скопировать ссылку «Положение линии» Скопировано

Пишем свойство text — decoration и после двоеточия указываем одно из доступных значений:

• underline — подчёркнутый текст.
• line — through — перечёркнутый текст.
• overline — надчёркнутый текст, линия находится над словами.
• none — отменяет все эффекты.

Выше указаны стандартные значения, с которыми вы будете сталкиваться чаще всего.

Стиль линии

Скопировать ссылку «Стиль линии» Скопировано

Не многие знают, что после ключевого слова, означающего положение линии, можно указать ещё и стиль этой линии и её цвет.

Для управления стилем линии используются следующие ключевые слова:

• solid — сплошная линия. Значение по умолчанию.
• double — двойная линия.
• dotted — точечная линия.
• dashed — пунктирная линия.
• wavy — волнистая линия.

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

Как будет выглядеть двойное перечёркивание:

 p  text-decoration: line-through double;> p  text-decoration: line-through double; >    Скопировать Скопировано Не удалось скопировать   

Стиль линии можно указать отдельно при помощи свойства text — decoration — style .

Цвет линии

Скопировать ссылку «Цвет линии» Скопировано

Цвет линии по умолчанию совпадает с цветом текста, для которого задаётся свойство text — decoration .

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

Например, сделаем двойное подчёркивание красного цвета:

 p  text-decoration: underline double #ff0000;> p  text-decoration: underline double #ff0000; >    Скопировать Скопировано Не удалось скопировать   

Цветом линии можно управлять отдельно при помощи свойства text — decoration — color :

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство не наследуется.

�� Значение по умолчанию для обычного текста — none . Но для ссылок ( ) значение по умолчанию — underline .

�� Свойство text — decoration целиком нельзя анимировать при помощи свойства transition ��

Но можно анимировать цвет линии!

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

 
К диакритикам.
 
Дополнение подчёркивается.
 
Эпанортозис.
 
В большинстве языков.
  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 — decoration .

�� Если по дизайну требуется задать тексту или ссылке подчёркивание, отличающееся от стандартного по толщине или положению, а также если нужно анимировать появление / пропадание линии, то используй псевдоэлементы : : before или : : after .

На практике

Скопировать ссылку «На практике» Скопировано

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

�� Иногда вам может потребоваться управлять расстоянием между текстом и линией ниже. Обычно это делается, через свойство line — height . Чем больше высота строки, тем ниже будет полоса подчёркивания.

К сожалению, этот способ подходит не всегда. Например, когда дизайнер задумал элемент несколько иначе. На примере ниже отказываемся от text — decoration и используем border — bottom или логический аналог border — block — end .

       О магазине   О тыквах   О нас   Контакты      
Магазин «Резная тыква»   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 — decoration : none . Это самый частый случай применения этого свойства. Перечёркивание или надчёркивание почти не встречаются в работе.

�� Отдельные свойства — text — decoration — line , text — decoration — style и text — decoration — color — редко встречаются в вёрстке, но знать о них нужно, чтобы при необходимости не переписывать свойство целиком только для изменения стиля или цвета линии.

Подчеркивание в CSS (красивые эффекты с примерами кода)

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «CSS Underline: 20+ Examples».

При создании ссылок или анимаций для кнопок меню у вас может возникнуть необходимость использовать подчеркивание. Из этой статьи вы узнаете о нескольких способах создать эффект подчеркивания с использованием CSS-свойств text-decoration , border-bottom , background-image , box-shadow , а также при помощи SVG.

CSS-свойство text-decoration

Свойство text-decoration — самый простой способ подчеркнуть текст. Но этому способу не хватает настраиваемости, и это проблема. Более продвинутые в этом смысле способы подчеркивания мы рассмотрим чуть дальше по тексту.

Давайте посмотрим, как при помощи text-decoration можно сделать простое подчеркивание.

Свойство text-decoration — это сокращенный вариант записи трех других свойств:

• text-decoration-line (указывается обязательно): определяет, где должна проходить линия подчеркивания. Возможные значения — overline (над текстом), underline (под текстом), underline overline (и над текстом, и под ним), line-through (перечеркивание текста).
• text-decoration-style : определяет стиль линии. Возможные значения — solid (простая прямая линия), dotted (линия из точек), dashed (пунктирная линия), wavy (волнистая линия), double (двойная линия).
• text-decoration-color : определяет цвет линии. Указываться может по-разному, например, #ccc, blue, currentColor.

Вот несколько примеров:

Чтобы убрать подчеркивание, нужно просто указать text-decoration: none .

Если вы хотите добавить подчеркивание, которое будет появляться только при наведении курсора, используйте следующие CSS-правила:

a < text-decoration: none; >a:hover

Альтернативой свойству text-decoration может послужить свойство border-bottom . С его помощью вы также можете задать внутренний отступ (padding) и отодвинуть линию подчеркивания от текста. В следующем примере первая ссылка создана при помощи свойства text-decoration , а вторая — при помощи border-bottom :

a:nth-of-type(1) < color: #32557f; text-decoration: underline #32557f dashed; >a:nth-of-type(2)

А теперь давайте перейдем к более интересным способам подчеркнуть текст.

Градиентное подчеркивание

При помощи свойства background: linear-gradient и других свойств фона можно создать градиентное подчеркивание. Вот пример:

background: linear-gradient(to left, #f69ec4, #f9dd94 100%); background-position: 0 100%; background-size: 100% 2px; background-repeat: repeat-x;

Почитать больше о градиентах можно в статье «CSS Gradients: 8 Examples of Usage».

Короткое подчеркивание

CSS позволяет делать подчеркивание любой ширины и высоты. Оно может быть и короче слова или ссылки. Например, если вам нужно создать короткое подчеркивание, чтобы выделить начало предложения или заголовок, можно использовать псевдоэлемент ::after со свойством border-bottom .

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

a::after

Вы также можете установить толщину линии, например 2 px (в примере — border-bottom: 2px solid #f9dd94; ).

Подчеркивание «маркером»

При помощи свойства transform можно сделать короткое подчеркивание скошенной линией.

h1 < padding: 30px 0 8px; position: relative; >h1::before

Также можно сделать подчеркивание «маркером» длинного куска текста. Пример, на который меня вдохновил Codepen.io/Ash:

body < padding: 4rem; >.box

Правила, касающиеся этого подчеркивания:

:root < /* The intrinsic width of the underline stroke (in pixels). This is * the same as the height of the cap images. Don't specify the * units! This is because of some of the calculations we do later on. */ --underline-intrinsic-width: 8; /* The actual width of the underline stroke we want to render (in pixels). * You can modify this, and the sizing and positioning should be calculated * accordingly. Again, Don't specify the units! */ --underline-width: 12; /* The color used to draw the underline. It should match the color * used in the cap images. unfortunately we can't modify the SVG * fill via CSS because it's a background image. */ --underline-color: #f1a1e3; /* We need to know the width of the cap images so that we * can position everything on the x axis accordingly. */ --underline-cap-width: 4px; /* The border is positioned relative to the bottom of the line. * We can move it upwards a little to create an overlap effect. */ --underline-offset-y: -2px; /* The padding to add to the x axis. By default, the caps would be * aligned with the beginning and end of the line. */ --underline-padding-x: 0.12em; >.text < display: inline; --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width)); padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale))); box-decoration-break: clone; background-repeat: no-repeat; color: #32557f; background-image: linear-gradient(180deg, var(--underline-color), var(--underline-color)), var(--cap-image-left), var(--cap-image-right); background-position-x: calc(var(--underline-cap-width) * var(--underline-width-scale)), 0, 100%; background-position-y: calc(100% - var(--underline-offset-y) * -1); background-size: calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px), auto calc(var(--underline-width) * 1px), auto calc(var(--underline-width) * 1px); font-size: 3rem; font-weight: bold; --underline-width: 20; --underline-offset-y: -2px; /* The cap images to use that form the left and right shape.*/ --cap-image-left: url(https://files-6lc03kjqt.now.sh/left-2.svg); --cap-image-right: url(https://files-e7gkh52mq.now.sh/right-2.svg); >

Подчеркивание заголовка

Чтобы подчеркнуть заголовок, можно использовать свойство text-decoration: underline;, но при помощи свойства border-bottom можно сделать красивее. Правда, в последнем случае вам нужно добавить display: inline; , чтобы подчеркивание не было длиннее самого слова.

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

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

В приведенных ниже примерах использовано свойство background-image , поскольку оно позволяет захватить несколько строк. И хотя вы можете использовать настоящие изображения, в нашем случае это просто линия. Мы используем линейный градиент, чтобы генерировать изображение.

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

p < margin: 0 auto; line-height: 1.5em; >span

background-repeat: repeat-x; делает подчеркивание горизонтальным.

Если изменять второе значение в background-position: 0 100%; , можно регулировать, насколько далеко от верха должно быть подчеркивание.

Также можно менять второе значение в background-size: 100% 3px; , чтобы подобрать нужную высоту подчеркивания.

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

1. Для начала нужно удалить дефолтное значение text-decoration .
2. Использование background-image позволяет охватить несколько строк. Поскольку мы хотим, чтобы подчеркивание было того же цвета, что и ссылка, мы используем currentColor и для начала, и для конца градиента. currentColor велит браузеру использовать цвет элемента из основного свойства цвета.
3. При помощи background-position мы задаем позицию изображения в нижнем левом углу. В нашем примере 0% означает горизонтальное позиционирование, а 100% — вертикальное. Также мы отключаем background-repeat , чтобы предотвратить создание нескольких экземпляров изображения. Эти два свойства можно записывать при помощи короткого формата записи ( background: no-repeat 0 100%; ).
4. При помощи background-size мы указываем нулевую ширину и высоту в 2 px. Нулевая ширина означает, что подчеркивание будет видимым только при наведении.
5. Устанавливаем для свойства transition значение background-size и скорость изменения 0,3 секунды.
6. При наведении курсора на ссылку мы меняем ширину изображения на 100%. Таким образом текст становится полностью подчеркнутым, а кроме того создается анимация.

p a < color: #32557f; text-decoration: none; background: no-repeat 0 100%; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; transition: background-size .3s ease; >p a:hover, a:focus

Использование изображений в качестве подчеркивания в CSS

Для стилизации подчеркивания в CSS также можно использовать изображения (в формате SVG или PNG). Ниже приведены примеры (на основе CodePen автор John D. Jameson).

body < line-height: 1.6; >p < background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/star.svg"); background-position: 0 1.3em; background-size: 10px 9px; background-repeat: repeat-x; >

body < line-height: 1.8; >p < background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/heart.png"); background-position: 0 1.4em; background-size: 15px 9px; color: #e8665f; background-repeat: repeat-x; >

Анимированное подчеркивание при наведении

Давайте теперь создадим анимированное подчеркивание для кнопок меню. Нам понадобится следующая разметка:

Вот общие стили для четырех примеров (специфические стили будут приведены ниже):

body < padding: 100px 50px; font-family: "Quicksand", sans-serif; font-size: 30px; line-height: 1.3; color: #fff; background-color: #7eb4e2; >ul < margin: 100px auto 0; list-style: none; display: flex; flex-direction: column; justify-content: space-between; text-align: center; padding: 0; max-width: 600px; >@media screen and (min-width: 600px) < ul < flex-direction: row; >>

Мы удаляем стандартное значение text-decoration и добавляем границу (border) при помощи псевдоэлементов CSS. Используя свойство CSS transition , мы анимируем этот border.

Анимированное подчеркивание при наведении № 1

li < position: relative; padding: 15px 0; >a < color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0.15em; display: inline-block; padding: 15px 20px; position: relative; >a::after < content: ""; position: absolute; bottom: 0; left: 50%; display: block; background: none repeat scroll 0 0 transparent; height: 2px; width: 0; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; >a:hover::after

Анимированное подчеркивание при наведении № 2

li < position: relative; padding: 30px; >a < color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: .25em; display: inline-block; padding: 15px; position: relative; >a:hover::after < width: 100%; right: 0; >a::after

Анимированное подчеркивание при наведении № 3

ul < margin: 40px; padding: 0 40px; background-color: #32557f; min-width: 200px; >a < display: inline-block; text-decoration: none; color: #fff; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; position: relative; transition: all 0.4s ease; padding: 30px; >a::after < content: ""; position: absolute; height: 2px; background-color: #f69ec4; width: 0; left: 50%; bottom: 0; transform: translateX(-50%); transition: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) all; >a:hover < color: #f69ec4; >a:hover::after

Анимированное подчеркивание при наведении № 4

a < text-decoration: none; margin: 10px; display: inline-block; color: #f9dd94 ; >a::before, a::after < content: ""; height: 4px; background: #32557f; display: block; transition: width 0.3s ease-in-out; margin: 0 auto; >a::before < width: 100%; >a::after < width: 0; >a:hover::before < width: 0; >a:hover::after

Анимированное подчеркивание, созданное при помощи свойства box-shadow

Подчеркивание также можно создать при помощи свойства box-shadow , которое добавляет тень к HTML-элементу. При наведении тень может увеличиваться. Посмотрите на пример:

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

a < text-decoration: none; box-shadow: inset 0 -2px 0 rgba(50,85,127,0.5), 0 2px 0 rgba(50,85,127,0.5); transition: box-shadow .3s; color: inherit; overflow: hidden; >a:hover

Здесь мы добавили к элементу две тени:

• inset меняет тень с внешней (outset) на внутреннюю
• 0 -30px 0 rgba(50,85,127,0.5) : 0 — это смещение по горизонтали, -30px — смещение по вертикали, 0 — радиус размытия, а rgba(50,85,127,0.5) — полупрозрачная голубая тень.
• 0 2px 0 rgba(50,85,127,0.5) : 0 — смещение по горизонтали, 2px — смещение по вертикали, 0 — радиус размытия.

Почитать больше о тенях можно здесь.

Подчеркивание «от руки», анимированное при наведении

Наконец, давайте создадим необычные подчеркивания, которые будут проявляться при наведении курсора. Первое будет напоминать подчеркивание от руки, а второе — выделение маркером от руки.

Подобные эффекты мы создадим при помощи масштабируемой векторной графики (SVG). У нас будет HTML-элемент для SVG и блок для текста со ссылками (выбирайте или .ink-svgline , или .link-svgmarker ).

Заменяем комментарий «Invisible SVG block» («Невидимый SVG-блок») на следующий код:

Вот правила CSS, позволяющие спрятать этот элемент:

.svg-wrap

А эти правила будут общими для обоих примеров:

body < padding: 100px 50px; font-family: "Quicksand", sans-serif; font-size: 30px; line-height: 1.8; color: #fff; background-color: #7eb4e2; >a < color: #404d5b; text-decoration: none; outline: none; >section < position: relative; z-index: 1; /* needed for setting pseudo-element z-index */ overflow: hidden; backface-visibility: hidden; >section a < position: relative; display: inline-block; outline: none; color: #404d5b; vertical-align: bottom; text-decoration: none; white-space: nowrap; >section a::before, section a::after

Первый пример подчеркивания с использованием SVG:

Заменяем комментарий «First SVG example» следующим кодом (используйте любой свой текст, главное — не меняйте структуру классов):

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

.link-svgline a svg.link-svgline < position: absolute; top: 100%; left: 0; overflow: hidden; margin: 0; width: 100%; height: 20px; transition: stroke-dashoffset 0.3s ease-in-out; transform: translateY(-90%); fill: none; stroke: #b1d474; stroke-width: 5; stroke-dasharray: 400px; stroke-dashoffset: 400px; >.link-svgline a:hover svg.link-svgline

Второй пример подчеркивания с использованием SVG:

Заменяем комментарий «Second SVG example» следующим кодом:

Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
 

.link-svgmarker a svg.link-svgline < position: absolute; top: 100%; left: 0; z-index: -1; overflow: hidden; margin: 0; width: 100%; height: 60px; opacity: 0.5; transition: stroke-dashoffset 0.3s ease-in-out; transform: translateY(-100%); fill: none; stroke: #f0f567; stroke-width: 36; stroke-dasharray: 400px; stroke-dashoffset: 400px; >.link-svgmarker a:hover svg.link-svgline

На последние два примера меня вдохновило Tympanus demo.