Как сделать полоску под текстом в css

Чтобы добавить полоску под текстом в CSS, можно использовать псевдоэлемент ::after и задать ему стиль и положение относительно основного элемента.

Ниже приведен пример кода, который создает полоску под текстом:

.element {
  position: relative;
}

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

В этом примере элементу с классом «element» задается относительное позиционирование, чтобы псевдоэлемент ::after мог быть относительно него абсолютно спозиционирован. Затем мы добавляем псевдоэлемент ::after и задаем ему абсолютное позиционирование и положение относительно основного элемента. Ширина псевдоэлемента задается через свойство «width», а высота через свойство «height». Задаем цвет фона через свойство «background-color».

Обратите внимание, что можно настроить стиль полоски и ее положение, например, изменить ее высоту, цвет, ширину или положение.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

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

Закажите услугу Как сделать полоску под текстом в css

Наш специалист свяжется с вами в ближайшее время и уточнит детали