html - 需要 CSS 属性 : line separator above heading

Question

我一直在寻找一种方法来定义 CSS 标题属性，以便在标题文本上方几个像素处获得一条彩色短线。我不想要顶部边框，因为它一直延伸到整个页面。

各种边框、轮廓、背景和其他属性似乎无法指定长度，例如百分比或像素数。

用于创建独立分隔符的各种 CSS 技术似乎都需要自己的代码块，例如一个类(class)或身份证。

目前我正在使用内联 block 和背景颜色属性来创建与我所追求的有点相似的东西。但很高兴知道是否有一种方法可以创建与我自己选择的长度相同的顶部边框。

Answer 1

您可以简单地使用伪选择器。

h1:before {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 50px;
  background: red;
}

<h1>Sample title</h1>