Как сделать что бы border не растягивался на всю страницу а только шёл до последней буквы?

Для того чтобы border не растягивался на всю ширину страницы, а шел только до последней буквы или элемента, можно использовать псевдоэлемент ::after. Вот пример как это можно сделать:

HTML:

<div class="text-with-border">Some text</div>

CSS:

.text-with-border {
    position: relative;
    display: inline-block;
}

.text-with-border::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: black;
    width: 100%; /* или другое значение для ширины линии */
}

В данном примере, мы создаем псевдоэлемент ::after, который добавляет линию под текстом, и позиционируем его относительно родительского элемента. Устанавливаем ширину этого псевдоэлемента в 100%, что делает его равным по ширине родительскому элементу. Таким образом, border будет располагаться только до конца текста, не растягиваясь на всю ширину страницы.