html - 如何在标题上绘制双底边框？

Question

我怎样才能做如下图所示的事情？

我想在我所有的 h1 上加一条粗线，但不太确定这样做的最佳做法。

HTML:

<h1>This is Our Work</h1>

CSS:

h1{
  border-bottom: 1px solid #246cb4;
  display: inline-block;
}

h1:after {
  content: "";
  display: block;
  border: 1px solid black;
  width: 50px;
  margin-top: 0px;
  position: absolute;
}

Codepen :

Answer 1

在这种情况下你不需要任何伪元素。

您可以使用 css3 绘制多个背景图像 linear-gradient()具有精确控制的尺寸和位置:

h1 {
  background-image: linear-gradient(to right, #246cb4, #246cb4),
                    linear-gradient(to right, #246cb4, #246cb4);

  background-repeat: no-repeat;
  background-size: 100% 1px, 50px 3px;
  background-position: bottom 2px left, bottom 1px center;
}

h1{
  background-image: linear-gradient(to right, #246cb4, #246cb4),
    linear-gradient(to right, #246cb4, #246cb4);

  background-size: 100% 1px, 50px 3px;
  background-repeat: no-repeat;
  background-position: bottom 2px left, bottom 1px center;

  position: relative;
  display: inline-block;
}

<h1>This is Our Work</h1>