我正在SaaS电子商务网站中实现自定义主题，并且我想在h2标签内的文本的任一侧创建一个带有装饰性图形的自定义标题栏。由于平台只是部分开源，并且我想在全球范围内应用此样式，因此添加HTML标记是不可行的，因此我正在寻找一种仅使用CSS来实现此目的的优美方法。
通常，我将使用简单的：before和：after标记应用标题栏修饰，并进行一些定位，因此它们将出现在h2标题文本的两侧-不管屏幕上文本的宽度如何。但是在这种特殊的设计情况下，我需要用侧面元素将水平空间的其余部分“填充”到文本的两边，一直到边缘，再加上背景图像。我已经尝试了多种方法，例如将：before和：after元素设置为显示：block并将它们浮动（仅当我给它们固定宽度或％的宽度时才可以使用），或者将它们设置为table-cell（但是由于我不能将文本分别包装在中间，因此也无法正确计算宽度）。我知道必须有一种方法可以做到这一点。您将如何处理？
前端代码非常简单：
<h2 class="pagetitle">Page Title Here</h2>
这是我要创建的视觉示例：带侧边元素的标题栏
用途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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句