Как сверстать такие декоративные полоски?

Как сверстать декоративные полоски по бокам от текста21534698eacc45e896b1e3b3dd81150f.png? (как на фото)
  • Вопрос задан
  • 787 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
Это, конечно, не семантично, но можно использовать <fieldset>
<fieldset><legend>Hello World</legend></fieldset>

fieldset {
  border: 0;
  border-top: solid 1px red;
}
legend {
  margin: 0 auto;
  padding: 1em;
}
https://jsfiddle.net/umLocy7e/

Или создать псевдоэлементы https://jsfiddle.net/hhsfbz5c/
Но в таком случае, нужно в css указывать длину текста. Или оборачивать текст в span с паддиногм и непрозрачным фоном.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@Froggyweb
псевдоэлементами с абсолютным позиционированием
Ответ написан
Комментировать
serjikz
@serjikz
web-developer
https://jsfiddle.net/ks74ddfj/

задумка думаю ясна. У span (можно и не span а любой тег, просто он должен быть inline-block) ставим фон и обязательно ему z-index и для after z-index.

Либо второй вариант - обе полоски через псевдоэлементы но это не универсальный пример получится (не выйдет воткнуть любой текст, в пример на который скинул ссылку можно воткнуть любой длины текст и все будет хорошо отображаться)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
22 нояб. 2024, в 12:20
10000 руб./за проект
22 нояб. 2024, в 11:53
3000 руб./за проект
22 нояб. 2024, в 11:51
20000 руб./за проект