Разделитель с подписью без лишней разметки
Декоративные линии вокруг короткой подписи можно создать псевдоэлементами, оставляя смысловой текст в HTML.
Назначение
Декоративные линии вокруг короткой подписи можно создать псевдоэлементами, оставляя смысловой текст в HTML.
Как это работает
Flexbox выделяет подписи нужную ширину, а псевдоэлементы получают остальное пространство. Для линий задают пустой content и границу; они не должны содержать единственную важную информацию.
Пример
<style>.divider{display:flex;align-items:center;gap:12px}.divider::before,.divider::after{content:"";flex:1;min-width:12px;border-top:1px solid #789}</style>
<p class="divider">или выберите другой раздел</p>Что должно получиться
Линии занимают свободное место вокруг подписи. При отключении CSS остаётся понятная фраза, а псевдоэлементы не добавляют лишних слов в содержание.
Граница применения и частая ошибка
Не выбирайте hr для каждой декоративной линии автоматически. Если подпись означает альтернативный способ действия, её текст должен объяснять эту связь независимо от оформления.
Самостоятельная проверка
Увеличьте подпись до нескольких слов и сузьте контейнер. Проверьте перенос или ограничение строки так, чтобы линии не вытеснили сам текст.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.