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

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

您需要将 position:relative 添加到 h1 并将 margin:0 auto 设置为 h1:after

h1 {
   border-bottom: 1px solid #0D6CC4;
   display: inline-block;
   position:relative;
}
h1:after {
   content: "";
   display: block;
   border: 2px solid #0D6CC4;
   width: 50px;
   margin-top: 0px;
   position: absolute;
   right: 0;
   left:0 ;
   bottom:-2px;
   margin:0 auto;
}

<h1>This is Our Work</h1>

Answer 2

用过这个 css

h1:after {
  content: "";
  display: block;
  border: 3px solid black;
  width: 50px;
  margin-top: 0px;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: -3px;
}
h1 {
  border-bottom: 1px solid #246cb4;
  display: inline-block;
  position: relative;
}

Answer 3

只需对与 position.

相关的样式进行一些调整即可尝试此操作

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

 h1:after {
  content: "";
  display: block;
  border: 2px solid black;
  width: 50px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: -1.5px;
}

<h1>This is Our Work</h1>

Answer 4

您需要定位元素 :after 和 :before

 .main-title{
   text-align: center;
   }
.inner-title{
position: relative;
    font-size: 24px;
    padding: 0 0 15px;
    margin: 0 0 15px;
    text-transform: uppercase;
    letter-spacing: 1px;  
}

h1:before {
    position: absolute;
    content: '';
    width: 150px;
    left: 50%;
    margin-left: -75px;
    height: 1px;
    background: blue;
    bottom: 0;
}
h1:after {
    position: absolute;
    content: '';
    width: 50px;
    left: 50%;
    margin-left: -25px;
    height: 3px;
    background: blue;
    bottom: -1px;
}

 <div class="main-title" >
  <h1 class="inner-title">Sevices</h1>
</div>

Answer 5

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

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

Answer 6

由于您不知道每个 h1 标签的长度，我建议您将元素平移到其父元素的中心，如本例所示：http://codepen.io/anon/pen/jyMzqN

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

 h1:after {
   content: "";
   display: block;
   position: absolute;
   height: 3px;
   background-color: black;
   width: 50px;
   left: 50%;
   bottom: -2px;
   transform: translateX(-50%);
}

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

How to draw dual bottom borders on a heading?

html

css

css-shapes