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

Question

我正在为我的主页创建一些程式化的标题。我迷上了这种类型的标题，我想知道是否可以用 css 创建类似的东西。如果有一定的重要性，我会使用 Bootstrap 样式。

它可能非常微弱，但标题后面有一个条纹“条”填充了容器的其余部分。我试着寻找它，但只找到了以标题前后一行为中心的标题。只有两行的标题类型(一行在标题顶部，一行在标题底部)也可能对我有用。

header 放在 .container 内，我希望 header 长度为 .container 的整个长度:

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

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

提前致谢!

Answer 1

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

除此之外，这里使用重复线性渐变的伪元素没问题:

使用 flexbox 的例子，虽然你可以绝对定位伪元素，给它一个很长的宽度，并在 h3 上应用 overflow:hidden 任何......呃, 溢出。

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>