Подчеркнутый текст ниже CSS — лучшие способы создания эффекта underline

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

Основным инструментом для создания такого подчеркивания является свойство CSS text-decoration с значением underline. Однако для изменения положения и стиля подчеркивания нам потребуется использовать несколько дополнительных свойств.

Для начала определим элемент, к которому мы хотим применить нестандартное подчеркивание:

<p>Текст, который мы хотим подчеркнуть</p>

Как реализовать underline ниже элемента с помощью CSS

Для реализации underline ниже элемента с помощью CSS можно использовать псевдоэлемент ::after. Этот псевдоэлемент позволяет добавить контент в конце выбранного элемента.

Для начала нужно задать стиль элементу, к которому нужно добавить underline:

.element {
position: relative;
display: inline-block;
}

Затем можно добавить псевдоэлемент ::after и задать ему стиль:

.element::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 2px;
width: 100%;
background-color: #000;
}

В данном коде мы создали пустой псевдоэлемент с помощью свойства content: "". Затем мы задали ему абсолютное позиционирование с помощью свойства position: absolute. Псевдоэлемент позиционируется относительно родительского элемента с помощью свойства position: relative.

Позиция псевдоэлемента находится слева и ниже элемента благодаря свойствам left: 0 и bottom: -2px. Ширина псевдоэлемента равна 100% благодаря свойству width: 100%.

Кроме того, мы указали высоту псевдоэлемента в 2 пикселя и задали ему черный цвет фона с помощью свойств height: 2px и background-color: #000.

Теперь underline будет отображаться ниже элемента, помеченного классом .element.

Таким образом, с помощью псевдоэлемента ::after и некоторых CSS-свойств, можно реализовать underline ниже элемента.

Методы создания underline в CSS

1. С помощью свойства text-decoration:

Одним из простейших способов добавить underline к тексту является использование свойства text-decoration со значением "underline". Например:

p {
text-decoration: underline;
}

Данное правило применит подчёркивание ко всем элементам <p> на странице. Чтобы добавить подчёркивание только к определённому элементу, необходимо указать его селектор.

2. С помощью псевдоэлемента ::after:

Ещё один способ создания underline – это использование псевдоэлемента ::after. Добавим подчёркивание к элементу <a> при наведении на него курсора мыши:

a:hover::after {
content: "";
display: block;
border-bottom: 1px solid;
}

В данном случае, после текста ссылки будет создан пустой псевдоэлемент ::after, которому будет присвоена одна пиксельная линия с помощью свойства border-bottom.

3. С помощью картинки:

Также возможно создать underline с помощью изображения. Для этого необходимо создать изображение underline и применить его в свойстве background. Например:

p {
background: url(underline.png) repeat-x bottom;
}

В данном случае, изображение underline.png будет повторяться только по горизонтальной оси с помощью функции repeat-x и будет располагаться внизу блока <p>.

Таким образом, существует несколько методов создания underline в CSS. Каждый из них имеет свои особенности и применяется в различных ситуациях в зависимости от конечной цели и требований к дизайну.

Использование псевдоэлемента ::after

Чтобы создать подчеркивание с помощью псевдоэлемента ::after, мы должны применить к целевому элементу определенные стили, такие как position: relative; и display: inline-block;. Затем, с помощью свойств content, position, height, width и background-color мы можем добавить и стилизовать подчеркивание.

Пример кода:

Этот текст будет подчеркнут:
Пример текста с подчеркиванием

Создается класс .underline, применяемый к тексту. Псевдоэлемент ::after добавляется для создания подчеркивания. Стили задают желаемый вид подчеркивания текста.

Использование псевдоэлемента ::after - эффективный способ создания подчеркивания текста с помощью CSS.

Создание подчеркивания с использованием border-bottom

Для создания подчеркивания с помощью border-bottom необходимо применить следующие стили:

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

<style>
.underline {
border-bottom: 1px solid black;
}
</style>
<p class="underline">Этот текст будет с underline-эффектом.</p>
В данном примере создается класс с именем underline, который применяется к параграфу. Заданные стили для класса underline устанавливают горизонтальную линию под текстом с толщиной 1 пиксель и черным цветом.
С помощью свойств border-bottom-style, border-bottom-width и border-bottom-color можно настроить стиль, толщину и цвет underline-эффекта в соответствии с требованиями дизайна.
С использованием свойства border-bottom можно создавать underline-эффекты не только для текста, но и для других элементов, например, для ссылок, заголовков и т.д.
Применение SVG для создания underline
Координата начала линии по оси Yx2Координата конца линии по оси Xy2Координата конца линии по оси YstrokeЦвет линииstroke-widthТолщина линии
x1
Координата начала линии по оси X
y1
Координата начала линии по оси Y
x2
Координата конца линии по оси X
y2
Координата конца линии по оси Y
stroke
Цвет линии
stroke-width
Толщина линии
Например, следующий код создаст подчеркивание с толщиной 2 пикселя и красным цветом:
<svg width="100%" height="2">
<line x1="0" y1="0" x2="100%" y2="0" stroke="red" stroke-width="2"/>
</svg>

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