Изучаем подчеркивание текста css

Применение фона

Существует сразу несколько различных способов подчеркнуть текстовый фрагмент. Я остановился на методе, который удовлетворяет всем критериям, и использует CSS свойство background-image. Фон background-image можно залить сплошным цветом, применяя функцию linear-gradient так, чтобы первый цвет перетекал во второй такой же.

Зачем использовать background-image, а не background-color, если предполагается заливка сплошным цветом? Дело в том, что background-image предоставляет больше свойств для манипуляций с фоном.

Размер фона ограничен по высоте и ширине и полностью заполняет ширину элемента ссылки — с помощью указания параметров background-size 2px и 100% соответственно. Это приводит к сплошному заполнению фона, поэтому я установил no-repeat для background-repeat.

Подчеркивание окажется сверху ссылки. Расположение линии меняем на нижнюю левую границу, устанавливая 0 100% для background-position — тогда она окажется внизу, под текстом ссылки.

CSS Properties

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

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgapgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightrow-gapscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Два фона

Выравнивание текста на css

Для использования нескольких фоновых изображений и манипулирования их свойствами, установите для background-* несколько значений, разделенных запятыми. Первая запись из списка окажется верхним слоем, последующие будут нижними слоями. Фон элемента анкора будет сплошным черным (#000000). Белый (#FFFFFF) фон скрыт под ним:

a {
  background-image: linear-gradient(#000000, #000000), linear-gradient(#ffffff, #ffffff);
}

В следующем примере используются два фона — оба находятся внизу, первый перекрывает второй:

a {
  color: #dfe5f3;
  text-decoration: none;
  background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
    linear-gradient(#feb2b2, #feb2b2);
  background-size: 100% 2px, 100% 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat, no-repeat;
}

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

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

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.

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

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

При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none, чтобы одновременно не получилось две линии (рис. 1).

Рис. 1. Использование пунктира для выделения ссылки

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

Пример 4. Двойное подчёркивание ссылок

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

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

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

В качестве значения свойства может использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
underline — устанавливает подчеркнутые текст;
overline — «надчеркивает» текст, то есть проводит линию над текстом;
line-through — зачеркивает текст;
blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

По умолчанию, для большинства элементов текст выводится без эффектов. Но некоторые html элементы отображают текст с подчеркиванием, в частности гиперссылки (тег a).

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
uppercase — текст в верхнем регистре;
lowercase — текст в нижнем регистре;
none — не меняет регистр символов.

Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:

font: font-size font-family

Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

p { font: italic 12px sans-serif }

Куда вставлять весь этот код?

CSS код со всеми прописанными свойствами нужно вставить в CSS файл вашего сайта или вашей темы (если сайт работает на CMS)

Для WordPress этот файл будет находиться по адресу:

wp-content/themes/название темы/style.css

Для Opencart этот файл находится по адресу:

catalog/view/theme/название темы/stylesheet/stylesheet.css

Данный CSS код нужно вносить в самый конец CSS файла.

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

С уважением Юлия Гусарь

Определение и использование

Свойство задает тип оформления текста для использования (like underline, overline, line-through).

Совет: Также посмотрите на свойство text-decoration,
который является сокращенным свойством для text-decoration-line, text-decoration-style, и text-decoration-color.

Примечание: Вы также можете комбинировать несколько значений, например подчеркивание underline и overline для отображения строк как под текстом, так и над ним.

Значение по умолчанию:	none
Унаследованный:	нет
Анимируемый:	нет Прочитайте о animatable
Версия:	CSS3
JavaScript синтаксис:	object.style.textDecorationLine=»overline» Попробовать

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as for Safari, Google Chrome, and Opera (newer versions), for Internet Explorer, for Firefox, for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

Оформление текста.

text-decoration

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

Значения.

none — отсутствие элементов оформления (по умолчанию).underline — подчеркивание.overline — линия над текстом.line-through — перечеркивание.blink — мерцание.inherit — применяется значение родительского элемента.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Оформление текста</title>
<style type="text/css">
H1 {text-decoration: underline; /* заголовок по умолчанию */}
H2 {text-decoration: underline; /* заголовок с подчеркиванием */}
H3 {text-decoration: overline; /* линия над текстом */}
p {text-decoration: line-through; /* текст перечеркнутый */}
</style>
</head>
<body>
<H2>Заголовок-2</H2>
<H2>Заголовок-2</H2>
<H3>Заголовок-3</H3>
<p>Текст на сайте</p>
</body>
</html>

Результат:

text-indent

Если вам нужно установить величину отступа первой строки блока текста (красная строка), создайте правило text-indent.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
p {text-indent:18px; /* отступ первой строки  */}
</style>
</head>
<body>
<p>Здесь много текста</p>
</body>
</html>

Результат:

Отступ первой строки в тексте будет 18px.

text-transform

Бывают случаи, когда нам необходимо изменить в тексте регистр букв. Воспользуйтесь правилом text-transform.

text-transform: none | capitalize | uppercase | lowercase

Значения:

none — значение по умолчаниюcapitalize — Все Первые Буквы Слов Заглавныеuppercase — ВСЕ БУКВЫ ЗАГЛАВНЫЕlowercase — все буквы строчными

Пример:

p {text-transform: capitalize;}

Результат:

Все Первые Буквы В Тексте Будут Заглавными.

letter-spacing

Letter-spacing можно задать отступ между буквами.

Пример:

p {letter-spacing: 10px;}

Результат:

В т е к с т е м е ж д у б у к в а м и б у д е т о т с т у п 1 0 p x .

word-spacing

Можно задать расстояние между словами.

Пример:

p {word-spacing: 20px;}

Результат:

Расстояние между словами будет 20px.

CSS Свойства

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingcaption-sidecaret-color@charsetclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerighttab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Выравнивание текста в CSS

Выравнивание текста по горизонтали задаётся свойством text-align, которое может принимать следующие значения:

left — выравнивание по левому краю;
right — выравнивание по правому краю;
center — выравнивание по центру;
justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

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

baseline — выравнивание линии элемента по базовой линии родительского элемента;
middle — выравнивание средней элементной точки по базовой линии родительского элемента;
text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
top — выравнивание верха элемента по верхней части самого высокого элемента строки;
sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Пример:

<title>Выравнивание текста по вертикали</title>
</head>
<body>
<table height="80" cellpadding="10" border="1">
<tr>
<td style="vertical-align:top">Текст 1</td>
<td style="vertical-align:bottom">Текст 2</td>
<td style="vertical-align:middle">Текст 3</td>
</tr>
</table>

Желаем удачи в изучении веб-дизайна!

Example Code

Basic CSS

Here’s an example of a basic declaration. A declaration consists of the property and its values for the various longhand properties.

text-decoration: orange dotted underline;

Any omitted values are set to their initial value. So the following is also valid.

text-decoration: underline;

In fact, this is the only syntax recognized by CSS1 and CSS2 (as they don’t support the longhand properties).

So, you could use the following code to provide CSS3 features, while still providing backwards compatibility for CSS1 and CSS2 browsers:

:link {
color: orange;
text-decoration: underline; /* Used by CSS1 and CSS2 browsers */
text-decoration: green dotted underline; /* Used by CSS3 browsers */
}

In CSS1 and CSS2 browsers, both the link text and its underline will be orange. Its underline will be solid (this is the only option prior to CSS3).

In CSS3 browsers, the link text will be orange and its underline will be green. Its underline will also be dotted.

Working Example within an HTML Document

<!DOCTYPE html>
<title>Example</title>
<style>
h1 {
font: 100 3em sans-serif;
color: gold;
text-decoration: overline wavy yellowgreen;
}
</style>

<h1>Overline Example</h1>

Использование ::after и content

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

Рис. 3. Линия, созданная через ::after

Положение такой линии относительно текста задается через свойство bottom с отрицательным значением, цвет линии через свойство background. На деле это получается не линия, а прямоугольный блок, поэтому используем фоновую заливку (пример 3).

Пример 3. Использование ::after

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h2 {
position: relative; /* Относительное позиционирование */
display: inline-block; /* Линия на ширину текста */
}
h2::after {
content: ‘; /* Выводим пустое содержимое */
position: absolute; /* Абсолютное позиционирование */
background: red; /* Цвет линии */
left: 0; /* Положение линии слева */
bottom: -5px; /* Положение линии */
width: 100%; /* Линия на ширину текста */
height: 2px; /* Высота линии */
}
</style>
</head>
<body>
<section>
<h2>Культурный речевой акт в XXI веке</h2>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>

Линии и рамки

CSS Properties

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

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

border-bottom

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

<html>
 <head>
  <title>Подчеркивание текста</title>
  <style>
  .underline {
  border-bottom: 2px solid; /* сплошное (solid) нижнее подчеркивание шириной в 2 пикселя */
}

.underline--blue {
  border-bottom-color: blue; /* подчеркивание синим цветом */
}

.underline--dotted {
  border-bottom: 3px red dashed; /* За пунктирное подчеркивание отвечает значение dashed */
}
  </style> 
 </head> 
 <body>
  <p>
  <span class="underline">Сплошное подчеркивание</span>
</p>

<p>
  <span class="underline underline--dotted">Пунктирное подчеркивание</span>
</p>

<p>
  <span class="underline underline--blue">Реализация подчеркивания синим цветом </span>
</p>
 </body>
</html>

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

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

box-shadow

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

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

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

.underline {
  background-size: 1px 1em;
  box-shadow:
    inset 0 -0.175em white,
    inset 0 -0.2em #000;
  display: inline;
}

background-image

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

.dashed {
  background-image: linear-gradient(to right, blue 75%, transparent 75%);
  background-position: 0 1.04em;
  background-repeat: repeat-x;
  background-size: 8px 3px;
}

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

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

Выводы

Так какой же способ подчеркивания лучший?

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

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

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

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

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

Также рекомендую обратить внимание на статью Бенджамина Вудроффа CSS Underlines Suck, в которой рассматриваются те же вопросы