Как лучше такое реализовать?

Question

[tokmaganbet1]

Всем привет, как сделать такой показатель? Думал сделать через псевдоэлементы, но это костыльно, есть другие способы?

Comments

[Сергей delphinpro]

<div class="progress" data-value="90%"></div>
вот и вся разметка. Закрашенная линия — ::before, метка — ::after

[tokmaganbet1]

Сергей, Спасибо, получилось, но кажется я не правильно проценты задаю через css

[Сергей delphinpro]

tokmaganbet1, наверное я всё-таки поспешил с ответом )
Вряд ли обойдёмся одним элементом. для закрашенной полоски придётся вкладывать внутрь еще блок.
или писать сто стилей (на каждый процент)

@each $i from 1 through 100 {
  .progress[data-value="#{$i}%"]::before { width: percentage($i / 100); }
}

[Сергей delphinpro]

https://jsfiddle.net/focmx7h1/
https://jsfiddle.net/focmx7h1/2/

[tokmaganbet1]

Сергей, применил костыль, так как все равно делаю для себя)

[tokmaganbet1]

Сергей, Еще раз спасибо. Твой способ работает)

Answer 1

[Алексей]

Почему псевдоэлементы это костыль?