Чтобы добавить линию под текстом в 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>
Вы можете настроить цвет, высоту, расстояние и другие свойства линии в соответствии с вашими требованиями. Также вы можете добавить дополнительные стили к тексту, используя класс самого текста.