使用伪 class/elements 在元素后创建三行

Question

我试图让我页面上的标题元素看起来像：

我看到了 CSS: :before and :after pseudo elements in practice 中显示的步骤（请参阅标题 'Styling titles'），它在标题元素前后各显示一行。我喜欢这个想法，并想将其扩展为根据示例图像显示三行。与图像不同，我希望线条更细，而不是占据整个高度 space 可用，但这就是我可以用有限的 tools/skills.

模拟的所有内容

我的问题不是得到三行，而是将每行对齐到它们的预期位置。目前它们以一种意想不到的方式混乱和堆叠（至少在我的理解中是出乎意料的）。

这里 JsFiddle 显示了我目前的进度。我已经为文本创建了 h1，并在文本的两侧但在 h1 内创建了两个 span。我这样做的原因是从 h1 中删除单行并通过每个 span 应用三行，利用 pseudo-elements :after 和 :before 其中两个.

不确定我哪里出错了，或者是否有可能。我可以完全访问 HTML 和 CSS，因此结构和样式没有被锁定。

如果我不清楚，请告诉我。

Answer 1

为什么不像现在那样创建左右图像并用 :before 和 :after 显示它，而不是设置 content: 添加 background: url('img_left.png');？

这里有一个Fiddle来表达我的意思。

Answer 2

您可以使用 CSS 背景图片或渐变来达到同样的效果。

CSS 背景类似于：

background:linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);

Answer 3

您可以使用两个 span 来完成。

.long {
  position: relative;
  width: 100%;
}
.long:after, .long:before {
  content: '';
  position: absolute;
  height: 3px;
  width: 30px;
  background: black;
  top: 50%;
  left: -34px;
}
.long:before {
  left: calc(100% + 4px);
}
.title {
  position: relative;
  font-size: 50px;
  margin-left: 40px;
}
.title:after, .title:before {
  content: '';
  position: absolute;
  height: 20%;
  width: 20px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  top: calc(100% - 31.2%*2);
  right: -24px;
}
.title:before {
  right: calc(100% + 4px)
}

<span class="title"><span class="long">text</span></span>

此外，如果您想要圆角，可以使用 svg。

<svg width="170" height="50" viewBox="-10 0 170 50">
  <defs>
    <line id="small" x1="3" y1="3" x2="20" y2="3" stroke="black" stroke-width="3" stroke-linecap="round" />
    <line id="large" x1="3" y1="3" x2="30" y2="3" stroke="black" stroke-width="3" stroke-linecap="round" />
  </defs>
  <text x="75" y="35" text-anchor="middle" font-size="50">text</text>
  <use transform="translate(5,10)" xlink:href="#small" />
  <use transform="translate(-5,17)" xlink:href="#large" />
  <use transform="translate(5,24)" xlink:href="#small" />
  <use transform="translate(125,10)" xlink:href="#small" />
  <use transform="translate(125,17)" xlink:href="#large" />
  <use transform="translate(125,24)" xlink:href="#small" />
</svg>

使用伪 class/elements 在元素后创建三行

Create three lines following element using pseudo class/elements

html

css