Длина черточек зависит от контента. Как такое сделать?

[yaparoff]

На дизайне у этих черточек разная длина и зависит от контента. Кто нибудь знает как сделать такое в верстке?



https://codepen.io/anon/pen/WWraar

[npofopr]

Я делал так

https://codepen.io/npofopr/pen/ZZEJEB

ну и там же можно много вариантов нагуглить)

[yaparoff]

1 час назад, npofopr сказал:

Я делал так

https://codepen.io/npofopr/pen/ZZEJEB

спасибо, но у вас там текст не скрывает черточки. Вы меня натолкнули на одну идею - подкрасить фон текста, но проблема в том что полупрозрачный фон  rgba(11, 100, 168, 0.08)  на таком же полупрозрачном фоне будет выделяться

Получилось так https://codepen.io/anon/pen/XQXowd

1 час назад, npofopr сказал:

ну и там же можно много вариантов нагуглить)

не знаю как это назвать (
Так бы давно нагуглил

Edited April 4, 2019 by yaparoff

[npofopr]

Да, обычно фон и ставится.

Да так и называть
https://ru.stackoverflow.com/questions/373335/Сверстать-линии-разной-длины
https://codepen.io/jensgro/pen/bNwXMW

[yaparoff]

Спасибо. Помогло. В этом же топике нашел ссылку на пример без закрашивания фона http://jsfiddle.net/L2ya3buj/1/

[npofopr]

Ага, только тут проблема с переносами строк. 
Но это в 80% решениях проблема.

[Int]

Я вот так делаю
http://playcode.io/289635

[Drevko]

Почему бы не использовать flexbox:

.flex_block {
  display: flex;
  justify-content: space-between;
}

.dots {
  border-bottom: 1px dotted black;
  flex-grow: 1;
}

<div class="flex_block">
  <div>Код</div>
  <div class="dots"></div>
  <div>205823</div>
</div>

И адаптивно и переносится.