Задать вопрос
@aliasst
html

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

Как сверстать декоративные полоски по бокам от текста21534698eacc45e896b1e3b3dd81150f.png? (как на фото)
  • Вопрос задан
  • 766 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 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 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 3
@Froggyweb
псевдоэлементами с абсолютным позиционированием
Ответ написан
Комментировать
Комментировать
@GreatRash
Как сделать линии до и после текста в html css (картинка прилагается)?
Ответ написан
Комментировать
Комментировать
serjikz
@serjikz
web-developer
https://jsfiddle.net/ks74ddfj/

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

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Поддержка сервиса по рассылкам
26 апр. 2024, в 15:12
30000 руб./за проект
Unity AR прототип
26 апр. 2024, в 15:11
15000 руб./за проект
Исправить получение заказов без заполненных обязательных полей БЗ
26 апр. 2024, в 15:07
1500 руб./в час
Ещё заказы