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

Содержание:

Подчеркивание текста
Другие способы подчеркивания в CSS
Использование text-decoration
Настало время практики
Озаглавим текст подчеркнутым названием
Подчеркивание под буквами и между словами
Подчеркивание текста
border-bottom
Декоративное подчёркивание ссылок
Подчеркнутый текст через свойство CSS border-bottom
- Кто внедрил
- Пример кода
Как сделать линию подчёркивания в тексте?
Подробно о зачеркивании/перечеркивании текста в html:
HTML тег подчеркивания текста u
Другие способы подчеркивания в CSS
Плавное подчеркивание ссылки при наведении от центра к краям
Подчеркнутый текст html с помощью тега.
Использование ::after и content
Плавное подчеркивание ссылки при наведении css
Заключение

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

Чтобы подчеркнуть только текст, необходимо воспользоваться свойством 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) ссылки, а потом – добавляет, если посетитель сайта наводит на нее мышью.

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

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

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

Другие способы подчеркивания в 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

Как добавить класс в javascript способы, примеры

Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение text-decoration к элементу <h2>.

Пример 1. Использование text-decoration

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Подчёркивание</title>
<style>
h2 {
text-decoration: underline; /* Добавляем подчёркивание */
text-decoration-color: red; /* Цвет линии */
}
</style>
</head>
<body>
<section>
<h2>Культурный речевой акт в XXI веке</h2>
<p>Действительно, мифопорождающее текстовое устройство
иллюстрирует дискурс, и это придает ему свое звучание,
свой характер.</p>
</section>
</body>
</html>

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

Рис. 1. Вид линии, созданной через text-decoration

Браузеры IE и Edge не поддерживают свойство text-decoration-color.

Настало время практики

Простые способы, как быстро перевернуть текст в ворде

Теперь я хочу, чтоб вы закрепили полученные знания и практически опробовали приведенный мной пример программного кода. Для тех, кто знаком с данной темой, это также будет полезно. Как мы все знаем: «Повторение – мать учения!».

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

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

Озаглавим текст подчеркнутым названием

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

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

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

Рассмотрим все способы как можно сделать подчеркнутый текст через html и CSS. Всего существует три варианта:

Через html тег
и
Через свойство CSS text-decoration
Через свойство CSS border-bottom

Подчеркивание под буквами и между словами

Подчеркнуть текст в Word легко. В новых версиях редактора нужная нам опция находится во вкладке “Главная” в блоке “Шрифт”.

Работать с ней можно 2 способами:

Сначала печатаем текст, затем выделяем нужный фрагмент и нажимаем на букву “Ч” в панели инструментов.
Сразу нажимаем на нужную опцию и потом набираем слова, которые нужно подчеркнуть. Чтобы вернуться к обычному написанию, еще раз нажимаем на букву “Ч”.

Когда подчеркивание активно, опция на панели инструментов выделяется серым цветом.

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

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

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

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

border-bottom

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

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

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

HTML:

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

CSS:

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

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

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

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

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

Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством 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>

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

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom
создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

Рассмотрим пример

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

С появлением CSS3, HTML5 и подключению веб-шрифтов сайты стали динамичными, красивыми и более технологичными в процессе разработки.Многие не любят ссылки подчеркивать и в некоторой степени я их понимаю. Довольно-таки толстые лини хотя и помогают пользователю ориентироваться на сайте и отличать ссылку от обычного текста. Но несколько затрудняют чтение.

С появлением формата RGBA
(Red Green Blue Alpha)
в CSS3 можно считать данную проблему решенной. Используя расширенный формат представления цвета, у веб-дизайнеров появилась возможность использовать альфа-прозрачность для цвета.

В отличие от свойства opacity его можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока. Цветовые значения RGBA являются продолжением цветовых значений RGB только с альфа-каналом — который определяет непрозрачность объекта.

Кто внедрил

Данной возможностью сразу же воспользовалась Студия Лебедева, Дизайн-бюро Артёма Горбунова, Илья Бирман… На их сайтах подчеркивание ссылок осталось, но оно стало более изящным.

Пример кода

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

A:link {
color: #0060a0;
border-bottom: 1px solid;
border-bottom-color: rgba(0,96,160,0.2);
}
a:hover {
color: #d04000;
border-bottom-color: rgba(255,218,202,0.5);
}

Верстка любого информативного текста подразумевает включение смысловых гиперссылок или анкоров. Добавляются эти элементы при помощи тега «а» (anchor). Современные браузеры по умолчанию отображают подобный элемент с Зачастую верстальщики или веб-дизайнеры предпочитают либо изменять этот стиль, либо удалять его вообще.

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

Если все-таки было принято решение убрать подчеркивание ссылок, то тут понадобится некоторые знания структуры формирования интернет страницы, а именно CSS.

Как сделать линию подчёркивания в тексте?

Если вы написали текст и вам нужно провести под ним прямую линию или подчеркнуть какое-то слово, предложение, в программе Word есть специальный инструмент подчёркивания. Чтобы его применить выполняем следующие действия:

Выделяем нижнее предложение, слово, которое нужно подчеркнуть.

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

Как в Word сделать жирную, пунктирную или двойную линию?

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

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

Если жирная линия должна быть за пределами текста, выбираем инструмент «Границы». Выбираем местоположение линии.

Нажав на ней правой кнопкой мыши, указываем цвет, толщину и размер линии.

Как сделать сплошную линию или линию под текстом?

На панели инструментов есть ещё одна кнопка, которую можно использовать для создания сплошной линии на всю ширину листа или линии под текстом.

Ставим курсор после строчки, под которой нужно провести сплошную линию.

Во вкладке «Главная» выбираем кнопку «Границы».

В данном случае нам нужно поставить линию между текстом. Выбираем «Внутренняя» граница. Если линию нужно поставить в конце текста – «Нижняя линия».

Как в сделать горизонтальную и вертикальную линии?

Ровную горизонтальную и вертикальную линии можно создать предыдущим способом с помощью инструмента «Границы». В нём есть варианты горизонтальной и вертикальной линии. Если же линию нужно провести в произвольном порядке, используем следующий способ.

Переходим во вкладку «Вставка» и выбираем «Фигуры».

Во всплывающем меню выбираем «Линии».

Выбираем тип линии и проводим её в нужном направлении.

Как сделать ровную линию?

На цифровом ряде клавиатуры есть кнопка, которая обозначает тире. Если зажать клавишу «Ctrl+тире», появится ровная линия.

Однако этот способ не подходит для подчёркивания текста.

Как сделать линию для подписи?

Для того, чтобы в Ворде сделать линию для подписи, стоит выполнить следующие действия:

Жмём «Вставка» и выбираем значок «Строка подписи».

Откроется новое окно. Вводим данные о лице и жмём «Ок».

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

Как сделать линию таблицы?

Для того, чтобы в Word сделать линию таблицы или нарисовать таблицу с помощью линий, выполняем следующее:

Жмём «Вставка», «Таблица», «Нарисовать таблицу».

На листе появится карандаш, а на линейке будут отображаться границы таблицы.

Рисуем таблицу и линии в ней.

Если же вам необходимо добавить линию до готовой таблицы, можно воспользоваться функцией вставки.

Или же выделить таблицу, нажать «Конструктор», выбрать «Нарисовать таблицу» и добавить с помощью карандаша нужную линию.

Как сделать линию невидимой?

Чтобы линия в Word была невидимой, она должна быть частью таблицы.

Рисуем таблицу и заполняем её текстом или числами.

Выбираем «Конструктор», «Границы» и выставляем «Нет границы».

Линии таблицы станут невидимыми.

О том, как подчеркнуть текст в разных текстовых редакторах, а также при создании html-страниц, мы и расскажем в этой статье.

Подробно о зачеркивании/перечеркивании текста в 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 запросов в месяц.

Пользуйтесь на здоровье! Не забудьте сказать

Теги :перечеркнутым и зачеркнуть текст htmlзачеркнутый текст тэг перечеркнуто

HTML тег подчеркивания текста u

Подчеркивание текста будем оформлять тегами:

Теперь верстаем текст:

<u>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</u>

И в опубликованной статье получим такое отображение:

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

Курсивный шрифт можно объединить с подчеркиванием текста:

<u><em>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</em></u>

Получим на блоге:

Также жирный шрифт объединив с подчеркиванием текста:

<u><strong>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</strong></u>

Увидим такой текст:

И наконец объединив все — жирный и курсивный шрифт с подчеркиванием текста:

<u><em><strong>Давайте рассмотрим основные горячие клавиши на нашей клавиатуре, сочетая которые мы сможем не только ускорить и сделать удобнее нашу работу за компьютером, но и комфортно пользоваться необходимыми функциями системы windows.</strong></em></u>

Получаем после публикации статьи:

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

Применяйте html теги жирного и курсивного шрифта, а также подчеркивания текста при верстке статей для своих сайтов.

Успехов вам и до новых встреч!

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

border-bottom

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

box-shadow

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

background-image

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами ):

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

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

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

a.example_6 {

display: inline-block;

color:#ffeb3b;

line-height: 1;

text-decoration:none;

cursor: pointer;

position:relative;

border: none;

}

a.example_6:after {

background-color: #ffeb3b;

display: block;

content: «»;

height: 2px;

width: 0%;

left:50%;

position:absolute;

-webkit-transition: width .3s ease-in-out;

-moz—transition: width .3s ease-in-out;

transition: width .3s ease-in-out;

-webkit-transform:translateX(-50%);

-moz-transform:translateX(-50%);

transform:translateX(-50%);

}

a.example_6:hover:after,

a.example_6:focus:after {

width: 100%;

}

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

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

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

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

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

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

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

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

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

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

Вывод:

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

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

Использование ::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

Как сделать плавное подчеркивание ссылки!? Просто нужно написать соответствующие стили для плавного подчеркивание ссылки, либо же прямо здесь скопировать их!

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

a.example_5 {

display: inline-block;

color:#ffeb3b;

line-height: 1;

text-decoration:none;

cursor: pointer;

border: none;

}

a.example_5:after {

background-color: #ffeb3b;

display: block;

content: «»;

height: 2px;

width: 0%;

-webkit-transition: width .3s ease-in-out;

-moz—transition: width .3s ease-in-out;

transition: width .3s ease-in-out;

}

a.example_5:hover:after,

a.example_5:focus:after {

width: 100%;

}

Заключение

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

text-decoration:

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

border-bottom:

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

a>span:

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

linear-gradient:

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

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