Как реализовать такое на CSS?

Question

[Web Lizard]

Речь идет о тексте.

Но при этом без оборачивания текста в div'ы и прочее.
Хотелось бы чтобы в html при этом это оставалось в таком виде
<div class="title">Пожарная безопасность</div>

Answer 1

[Алекс Глебов]

background: linear-gradient(to top, gray 0%, gray 30%, transparent 30%, transparent 60%, gray 60%, gray 100%);

или картинку в фон png с прозрачностью
если не задавать высоту блоку, чтобы зависела от текста, то должно получиться.

Answer 2

[Олег]

plnkr.co/edit/MlvlWcqZdGY78MJ2XtIv?p=preview

Comments

[Web Lizard]

Display: inline не подойдет, потому как строки должны иметь фиксированную ширину