Настройка переменной ширины отображения секций: before и: after - PullRequest
Новая
       10

Настройка переменной ширины отображения секций: before и: after

1 голос
/ 12 января 2020

Я внедряю пользовательскую тему в веб-сайт SaaS для электронной коммерции и хочу создать собственную строку заголовка с декоративной графикой по обе стороны от текста внутри тега h2. Поскольку платформа только частично с открытым исходным кодом, и я хочу применить этот стиль в глобальном масштабе, добавить разметку HTML не представляется возможным, поэтому я ищу изящный способ сделать это, используя только CSS.

Как правило, я применяю оформление строки заголовка, используя простые теги: before и: after, с некоторым позиционированием, чтобы они отображались по обе стороны от текста заголовка h2 - независимо от ширины текста на экране. Но в этом конкретном случае дизайна мне нужны боковые элементы, чтобы «заполнить» оставшуюся часть горизонтального пространства с обеих сторон текста, вплоть до краев фоновым изображением. Я пробовал разные вещи, такие как установка отображаемых элементов: before и: after: block и их плавание (что работает, только если я задаю им фиксированную или% ширину, что я не могу сделать на самом деле), или установив их в ячейку таблицы (но так как я не могу отдельно обернуть текст в середине, это также не правильно рассчитывает ширину). Я ЗНАЮ, что должен быть способ сделать это. Как бы вы справились с этим?

Код интерфейса очень прост: 

<h2 class="pagetitle">Page Title Here</h2>

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

1 Ответ

0 голосов
/ 13 января 2020

Использование flex: 

body {
  background: navy
}

h2 {
  display: flex;
  text-align: center;
  background: ivory
}

h2:before,
h2:after {
  content: '~';
  flex: 1 0;
  text-align: left;
  background: violet
}

h2:before {
  text-align: right
}
<h2>Page Title Here</h2>
...