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

Узнайте, как использовать свойство CSS «text-decoration» для создания подчеркивания текста. Включите подчеркивание в стили CSS при помощи значения «underline». Найдите практический пример с использованием «text-decoration» для подчеркивания текста.

В CSS есть несколько способов подчеркивания текста. Один из них — это использование свойства text-decoration.

Пример использования свойства text-decoration

p {
   text-decoration: underline;
}

Вот пример, как это выглядит в браузере:

Этот текст подчеркнут

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

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

p {
   border-bottom: 1px solid;
   border-bottom-color: currentColor;
}

Вот пример, как это выглядит в браузере:

Этот текст подчеркнут

Еще один способ подчеркивания текста — это использование псевдокласса :after. С помощью этого псевдокласса можно создать любое подчеркивание, которое вы хотите. Например, вы можете создать подчеркивание с закругленными углами, используя свойство border-radius.

p::after {
   content: '';
   border-bottom: 1px solid;
   border-radius: 4px;
   width: 100%;
   display: block;
}

Вот пример, как это выглядит в браузере:

Этот текст подчеркнут

Как видите, CSS предоставляет множество возможностей для подчеркивания текста. Вы можете использовать свойство text-decoration, чтобы создать простое подчеркивание, или использовать псевдокласс :after и свойства border-bottom и border-radius, чтобы создать более сложное подчеркивание.