自定义 :before 和 :after 部分的可变显示宽度

Question

我正在 SaaS 电子商务网站中实施自定义主题，我想在 h2 标签内创建一个带有装饰图形的自定义标题栏。因为平台只是部分 open-source，我想在全球范围内应用这种样式，添加 HTML 标记是不可行的，所以我正在寻找一种优雅的方式来使用 CSS 而已。

通常，我会使用简单的 :before 和 :after 标签应用标题栏装饰，并进行一些定位，因此它们会出现在 h2 标题文本的两侧 - 无论该文本在屏幕上有多宽。但是在这个特殊的设计案例中，我需要侧面元素 "fill in" 水平 space 的剩余部分到文本的任一侧，一直到边缘，以及背景图像。我尝试了多种方法，例如将 :before 和 :after 元素设置为 display:block 并使它们浮动（这只有在我给它们固定宽度或 % 宽度时才有效，但我真的做不到），或将它们设置为 table-cell（但由于我无法将文本单独包裹在中间，因此这也无法正确计算宽度）。我知道必须有办法做到这一点。你会怎么处理？

front-end代码超级简单：

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

这是我正在尝试创建的可视化示例： title bar with side elements

Answer 1

使用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>

自定义 :before 和 :after 部分的可变显示宽度

Customizing variable display widths of :before and :after sections

html

css

resize

spacing

dynamic-resizing