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>

Answer 2

您需要将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 3

使用了这个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 4

尝试使用与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 5

您需要定位元素: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 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%);
}

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

6 个答案: