Чтобы задать нижнее подчеркивание не на всю ширину текста, можно использовать псевдоэлемент ::after в сочетании с CSS свойством content.
Вот пример кода:
<!DOCTYPE html>
<html>
<head>
<style>
.underline-text {
position: relative; /* устанавливаем позицию родительского элемента как относительную */
}
.underline-text::after {
content: "";
position: absolute; /* устанавливаем позицию псевдоэлемента как абсолютную */
bottom: -3px; /* устанавливаем отступ псевдоэлемента от текста по нижней границе (-3px - примерное значение для создания эффекта подчеркивания) */
left: 0; /* устанавливаем отступ псевдоэлемента от левого края родительского элемента (0 - подчеркивание будет начинаться с самого начала текста) */
height: 2px; /* устанавливаем высоту подчеркивания */
width: 50%; /* устанавливаем ширину подчеркивания на 50% от ширины родительского элемента */
background-color: #000; /* устанавливаем цвет подчеркивания */
}
</style>
</head>
<body>
<div class="underline-text">Пример текста с нижним подчеркиванием.</div>
</body>
</html>
В этом примере мы создали класс .underline-text, который применяется к элементу, который вы хотите подчеркнуть. Псевдоэлемент ::after добавляет подчеркивание внизу текста. Мы установили его позицию относительно родительского элемента с помощью свойства position: relative, а затем установили отступы и размеры подчеркивания через свойства bottom, left, height и width.
Вы можете настроить размер, цвет и положение подчеркивания, изменяя значения этих свойств в CSS.