Как сделать линию под текстом css

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

/* создание линии под текстом */
.text-underline::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 5px; /* расстояние между текстом и линией */
  background-color: #000;
}

В этом примере мы создаем псевдоэлемент ::after для класса text-underline, задаем ему ширину 100%, высоту в 1 пиксель, цвет фона черным и смещаем его на 5 пикселей от текста вниз.

Чтобы этот код работал, нужно добавить класс text-underline к нужному элементу HTML:

<p class="text-underline">Текст с линией под ним</p>

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

реклама

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

реклама

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

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

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

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

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

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