1

我正在将自定义主题实现到 SaaS 电子商务网站中，并且我想在 h2 标记内的文本两侧创建一个带有装饰图形的自定义标题栏。因为该平台只是部分开源，而且我想在全球范围内应用这种样式，所以添加 HTML 标记是不可行的，所以我正在寻找一种仅使用 CSS 的优雅方式来做到这一点。

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

前端代码超级简单：

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

这是我正在尝试创建的视觉示例： 带有侧面元素的标题栏

4

1 回答 1

0

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

于 2020-01-12T23:15:39.437 回答