Как сверстать линию над многострочным текстом?

Question

[tarthur]

Как сверстать такую линию над текстом(адаптивно):
prntscr.com/azqzno

Comments

[devstudent]

количество строк не имеет значения

[tarthur]

devstudent: поправил вопрос

[devstudent]

очень странная задумка , впервые слышу такое ))

Answer 1

[devstudent]

например так

.text {
width:70%;/*ширина текста над которым линия, если ширина его родителя = 100%*/
position: relative;
}
.text:before{
  position: relative;
  width: 100%;
  height: 1px;
  background-color: orange;
  top:-15px;
  content: '';
  left: 0;
  display: block;
}

Comments

[tarthur]

поправил вопрос.

[devstudent]

ответ от этого не изменится )) попробуйте

[tarthur]

devstudent:
prntscr.com/azr8uh
не то, ведь: адаптивно линия всегда должна заканчиваться последней буквой первой строки текста

[devstudent]

tarthur: если линия оборвется будет короче текста во второй третье и любой другой строке , разве это будет красиво выглядеть? если да, то по идее мерять ширину первой строки и подставлять ее в ширину псевдоэлемента . как измерять ширину первой или любой другой строки через js например, не представляю

[tarthur]

devstudent:
согласен,
ваш вариант хороший, но если его еще улучшить, так как при адаптации, возникает пустое пространство:
prntscr.com/azreod
думаю самый верный вариант, это что бы заканчивалось на последнюю букву в самом выступающем слове.

[devstudent]

tarthur: поиграйте со свойством переноса слов word-break, в вашем варианте пустое пространство разного размера возникает из-за того, что в него не помещается слово, и это слово просто переносится в другую строку. если вам такое подходит .

[tarthur]

devstudent:
не ну ясно откуда эти отступы,
вобщем думаю ничего лучшего тут не придумать.

[devstudent]

tarthur: тоже так думаю, другой, более оптимальный )) мне неизвестен. я всегда этим пользуюсь

Answer 2

[Ivan Bogachev]

border-top: solid 1px #ff0;

Comments

[tarthur]

поправил вопрос.

Answer 3

[kcarvi]

задаете border-top тексту
https://jsfiddle.net/LksfgyL5/