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

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

В результате получится:

Fancy Underline

Свойство text-decoration-color

Это свойство наконец-то дает нам возможность изменить цвет оформления текста!

text-decoration-style

Свойство text-decoration-style используется для определения типа оформления текста, а новые инструкции содержат два значения: double и wavy:

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Wavy Decoration

Свойство text-decoration-line

Свойство text-decoration-line принимает значения underline, overline, line-through и blink (однако blink считается устаревшим):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

Вы получите:

Strike This

Свойство text-decoration-skip

С помощью свойства text-decoration-skip мы можем сделать так, чтобы оформление текста не выходило за рамки элемента, к которому оно применяется.

Значение ink позволяет предотвратить перекрытие элементов оформления текста:

.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

Вы получите:

Hippopotamus

Значение objects пропускает оформление элементов, которые имеют отображение встроенного блока.

<p>
  Getting <span>Very</span> Fancy
</p>

.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

В результате будет:

Getting Very Fancy

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

• spaces: оформление не касается пробелов и знаков препинания.
• edges: создает зазор, если два элемента с текстовым оформлением находятся рядом друг с другом.
• box-decoration: оформление пропускает любое унаследованное поле, отступ или границу.

text-underline-position

Свойство text-underline-position – еще один способ управлять позиционированием оформления текста по отношению к глифам. Возможные значения: auto, under, left и right.

При начальном значении auto браузеры обычно размещают оформление близко к базовой линии текста:

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

Что выглядит так:

Hippopotamus

… и теперь обратите внимание, как с значение under перемещает оформление текста под выносные элементы:

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Hippopotamus

Значения left и right для text-underline-position используются для управления оформлением текста в режимах вертикального письма.

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

Can I Use text-decoration? сообщает, что 94% браузеров по всему миру хотя бы частично поддерживают это свойство.

Читайте также: Настройка полосы прокрутки с помощью CSS

Как сделать подчёркивание заголовка? | WebReference

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

Использование text-decoration

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

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

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

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

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

Использование border-bottom

Свойство border-bottom добавляет к элементу снизу линию заданной толщины, цвета и стиля. Такая линия занимает всю доступную ширину, несмотря на длину текста заголовка (рис. 2).

Рис. 2. Вид линии, созданной с помощью border-bottom

Расстояние от линии до текста можно регулировать с помощью свойства padding-bottom, как показано в примере 2.

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

Чтобы линия была на ширину текста, достаточно заголовок превратить в строчно-блочный элемент, добавив к селектору h3 свойство display со значением inline-block.

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

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

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

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

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

Линии и рамки

См. также

• border-bottom
• relative и absolute
• text-decoration
• text-decoration-color
• Аккордеон меню
• Добавление тени
• Начертание
• Не только текст
• Оформление ссылок
• Очистка float
• Подробнее о позиционировании
• Псевдоэлемент ::after
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Свойства текста в CSS
• Точки между слов

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05. 10.2018

Редакторы: Влад Мержевич

Свойство CSS text-decorhhhhation-line

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установка различных типов линий оформления текста:

дива {
  text-decoration-line: overline;
}

дел.б {
  text-decoration-line: подчеркивание;
}

дел.с {
строка оформления текста: сквозная;
}

раздел д {
  text-decoration-line: надчеркивание, подчеркивание;
}

Попробуйте сами »

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

Свойство text-decoration-line задает используемый вид оформления текста (например, подчеркивание, надчеркивание, зачеркивание).

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

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

Показать демо ❯

Поддержка браузера

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

Числа, за которыми следует -moz- или -webkit-, указывают первую версию, которая работала с префиксом.

Собственность
строка оформления текста	57,0	79,0	36,0 6,0 -моз-	12,1 7. 1 -вебкит-	44,0

Синтаксис CSS

text-decoration-line: нет|подчеркивание|надчеркивание|сквозь строку|начальный|наследовать;

Значения свойств

Значение	Описание	Играй
нет	Значение по умолчанию. Не указывает строку для оформления текста	Демонстрация ❯
подчеркивание	Указывает, что под текстом будет отображаться строка	Демонстрация ❯
над чертой	Указывает, что строка будет отображаться поверх текста	Демонстрация ❯
проходной	Указывает, что через текст будет отображаться строка	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник CSS: Оформление текста CSS

Ссылка HTML DOM: свойство textDecorationLine

❮ Предыдущая Полное руководство по CSS Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Top Tutorials

900 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

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

В этой статье мы узнаем о подчеркивании текста в CSS. Каскадная таблица стилей предназначена для презентации. Чем лучше мы используем стиль, тем более совершенной будет презентация. Сказав это, нужно знать, что существует множество деталей, о которых нужно позаботиться при стилизации с помощью CSS. В качестве простого примера возьмем подчеркивание текста. Теперь простое подчеркивание текста можно выполнить с помощью свойства text-decoration. Но чтобы исправить детализацию, мы должны вникнуть в ее тонкости и исправить свойства позиционирования и смещения. Именно об этом мы и поговорим в этой статье. text-underline-position и text-underline-offset — это улучшенные функции для добавления к подчеркиванию, предоставляемому свойством text-decoration: underline.

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

1. Положение подчеркивания текста: Это свойство определяет положение подчеркивания относительно текста.

Синтаксис для этого:

 положение подчеркивания текста: авто| под | слева| правильно| выше 

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

2. Text-underline-offset:  Это не подсвойство свойства text-decoration. Это свойство устанавливает расстояние смещения подчеркивания относительно его исходного положения. Расстояние смещения здесь означает расстояние от определенного пути.

Синтаксис для этого может быть следующим:

 text-underline-offset: length 

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

Пример реализации в CSS Text Underline

Ниже приведены примеры реализации для одного и того же:

Пример № 1

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

• В этом примере мы проверим text-underline-position с двумя значениями, то есть выше и ниже. Мы можем наблюдать тонкую разницу между двумя значениями свойства в соответствующем выводе.
• Сначала мы создадим файл CSS, так как мы используем внешний CSS.
• Мы создадим класс, в котором будем использовать сокращенное свойство text-decoration для оформления подчеркивания. Далее мы будем использовать text-underline-position и определим его отдельно. Мы можем добавить другие функции по своему усмотрению. Код класса CSS должен выглядеть так:
.

Код:

 .class1{
оформление текста: подчеркивание двойное зелёное;
позиция подчеркивания текста: под;
семейство шрифтов: «Franklin Gothic Medium», «Arial Narrow», Arial, без засечек;
} 

• Аналогично предыдущему, мы определим еще один класс CSS и сохраним позицию подчеркивания текста, как указано выше. Код должен быть похож на приведенный ниже:

Код:

 . class2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Окончательный код CSS должен быть примерно таким:

Код:

 .класс1{
text-decoration: подчеркивание двойное зелёное;
text-underline-position: под;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
.класс2{
text-decoration: подчеркивание двойное фиолетовое;
text-underline-position: выше;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Далее мы создадим HTML-страницу. Кроме того, обязательно вызовите внешний файл CSS на странице. Поскольку мы определили классы CSS, мы можем использовать их с любым элементом HTML для применения стиля к этому конкретному элементу. В этом примере мы будем использовать его с элементом заголовка, то есть

  . Окончательный HTML-код должен выглядеть примерно так:

Код:

 
<голова>

 css">

<тело>
Тестирование позиции подчеркивания текста: под
Проверка положения подчеркивания текста: выше

 

Вывод:

• Мы можем ясно видеть, что, делая положение как нижнее или верхнее, мы можем получить два разных стиля подчеркивания текстового содержимого.

Пример #2

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

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

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
} 

• Второй класс должен иметь подчеркивание справа от вертикально выровненного текста. Код должен быть похож на следующий:

Код:

 .class2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Окончательный файл CSS должен выглядеть примерно так, как показано ниже:

Код:

 .class1{
режим письма: вертикальный-lr;
положение: абсолютное;
padding-right: 100 пикселей;
text-decoration: подчеркивание двойное зелёное;
позиция подчеркивания текста: слева;
семейство шрифтов: 'Franklin Gothic Medium', 'Arial Narrow', Arial, без засечек;
}
. класс2{
режим письма: вертикальный-lr;
отступ слева: 100 пикселей;
text-decoration: подчеркивание волнистым фиолетовым;
text-underline-position: справа;
семейство шрифтов: 'Segoe UI', Tahoma, Geneva, Verdana, без засечек;
} 

• Конечная HTML-страница должна вызывать внешний CSS и включать оба класса при стилизации элементов. Код HTML-страницы должен выглядеть следующим образом:
.

Код:

 
<голова>



<тело>
Проверка положения подчеркивания текста: слева
Проверка положения подчеркивания текста: выше

 

• Сохраните этот код и откройте HTML-файл в браузере. Окончательный вывод должен выглядеть примерно так, как показано на скриншоте ниже:
.

Вывод:

Пример #3

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

• некоторые тексты.

  No related posts.