使用伪类/元素在元素后面创建三行

Question

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

我看到CSS: :before and :after pseudo elements in practice显示的步骤（参见标题'样式标题'），它在标题元素之前和之后显示一行。我喜欢这个想法，并希望将其扩展为根据示例图像显示三行。与图像不同的是，我希望线条更细，不占用可用的全高度空间，但这就是我可以用有限的工具/技能进行模拟。

我的问题不是获得三条线，而是将每条线对齐到预定的位置。目前他们陷入困境并以意想不到的方式堆叠（至少从我的理解中出乎意料）。

这是JsFiddle显示我到目前为止的进展情况。我已经为文本创建了h1，在文本的任一侧创建了两个span但在h1内。我的理由是从h1中删除单行，并使用伪元素span和:after通过每个:before应用三行。 / p>

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

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

Answer 1

您可以使用两个span来执行此操作。

＆＃13;

＆＃13;

.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)
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

这是 Fiddle ，以表明我的意思。

Answer 3

您可以使用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%);