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

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

  • автор:

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

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

Пример 1. Элемент

Для простого оформления текста с помощью подчёркивания воспользуйтесь свойством text-decoration со значением underline (пример 2).

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

См. также

  • text-decoration
  • Начертание
  • Оформление ссылок
  • Продвинутая семантика и доступность
  • Свойства текста в CSS
  • Стилизация ссылок

Подчеркнутый текст html (CSS)

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

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

Подчеркнутый текст через html тег и

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

Название пришло от английского слова «underline». Html тег считается более новым.

p>Обычный текст. u>Подчеркнутый текст через тег u/u>/p> p>Обычный текст. ins>Подчеркнутый текст через тег ins/ins>/p>

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

Обычный текст. Подчеркнутый текст через тег u

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

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

Синтаксис CSS text-decoration

text-decoration: none|underline|overline|line-through|inherit;
  • none — текст без оформления
  • underline — нижнее подчеркивание
  • overline — верхнее подчеркивание
  • line-through — зачеркивание текста
  • blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

html> head> style> .underline< text-decoration: underline; > /style> /head> body> div class css">underline">Текст со свойством text-decoration: underline/div> /body> /html>

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

Текст со свойством text-decoration: underline

Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: CSS text-decoration

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

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

html> head> style> .border_bottom_red< border-bottom: 1px solid #F00; > .border_bottom_dashed< border-bottom: 2px dashed #000; > /style> /head> body> div class css">border_bottom_red">Текст со свойством border-bottom (красное подчеркивание)/div> div class css">border_bottom_dashed">Текст со свойством border-bottom (пунктирное подчеркивание)/div> /body> /html>

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

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

Зачеркнутый текст HTML

Для зачеркивания текста в HTML применяется тег strike:

Результат выполнения данного кода:

  1. Электроник
  2. Сыроежкин
  3. Смирнов
  4. Чижиков
  5. Кукушкина

Данный тег не имеет атрибутов. Вместо тега HTML strike может использоваться и сокращенная его версия — s (аналогично, жирный — b, курсив — i, подчеркнутый — u):

Конструктор LEGO "Нубекс"

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

Конструктор LEGO «Нубекс»

Использование тега s и strike считается неверным с точки зрения валидации кода (необходимо использовать переходной Doctype). Или другой вариант — использовать CSS.

Перечеркнутый текст: CSS

С помощью CSS текст можно «декарировать» при помощи свойства text-decoration. Это свойство может принимать следующие значения:

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

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

text-decoration: underline blink overline;

Сделаем теперь перечеркнутый текст при помощи CSS:

   Зачеркнутый текст CSS - "Нубекс"  p < color:#fff; >.strike < text-decoration: line-through; color: #fff; >.block  

Конструктор LEGO сайтов "Нубекс"

Подчеркнутый текст на CSS

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

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

Демонстрация свойства

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

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

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

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

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

border-bottom

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

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

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

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

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

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

box-shadow

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

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

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

.underline

background-image

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

.dashed

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *