用css创建一个程式化的html标题

Question

我正在为我的主页创建一些风格化的标题。我摔倒了这种类型的标题，我想知道是否有可能用css创建这样的东西。我正在使用Bootstrap样式，如果它有一些重要性。

它可能非常微弱，但是在填充容器的其余部分后，标题有一个条纹“bar”。我尝试寻找它，但只发现在标题之前和之后以一行为中心的标题。只有两行的标题类型（一个位于标题顶部，另一个位于标题的底部）也可能对我有用。

标题放在.container中，我希望标题长度为.container的整个长度：

<div class="container">
  <h3><span>Projects</span></h3>
</div>

JSFiddle：https://jsfiddle.net/ozxk82j1/1/

提前致谢！

Answer 1

首先HTML无效。 span元素inline不能包含h3，因为它们是块级别。

除此之外，伪元素在这里具有重复的线性渐变：

使用flexbox的示例虽然您可以绝对定位伪元素，但要给它一个非常长的宽度并在overflow:hidden上应用h3任何...... erm，溢出。

h3 {
  display: flex;
}
h3::after {
  content: '';
  background: repeating-linear-gradient(135deg, 
    transparent, transparent 2px, 
    lightgrey 4px, lightgrey 6px);
  flex: 1;
  margin-left: .25em;
}

<div class="container">
  <h3>Projects</h3>
  <h3>Lorem ipsum dolor ipsum.</h3>
</div>

可以将伪元素的高度调整为套件（align-items:center使其保持垂直居中），并且可以使用RGBA颜色调整“线条”的不透明度。

h3 {
  display: flex;
  align-items: center;
}
h3::after {
  content: '';
  
  background: repeating-linear-gradient(135deg, 
    transparent, transparent 2px, 
    rgba(0,0,0,0.1) 4px, rgba(0,0,0,0.1)  6px);
  
  height:.5em;
  flex: 1;
  margin-left: .25em;
}

<div class="container">
  <h3>Projects</h3>
  <h3>Lorem ipsum dolor ipsum.</h3>
</div>