自定义下划线效果，而不是为其创建背景图像

Question

有没有更好的方法来通过CSS创建这种样式的“下划线”，而不是为它创建背景图像？

为了清楚起见，我只对“复制线条”效果感兴趣，一条更粗更短的线条直接位于不同颜色的更细更长的线条上。谢谢!

​

​

Answer 1

您可以在这里使用伪元素，即:before和:after。在这里，我所做的是，使用一个将其显示为inline-block的h1元素。稍后，我们需要使用CSS定位来设置两个底部边框，因为边框比您的元素小。

稍后，再次使用CSS定位，我们将小的border放在大的上面。请注意，我使用left: 50%;和transform: translateX(-50%)将边框定位在水平中心。

确保不要错过z-index，因为在这里使用它很重要，否则另一个边框将在较小的边框上渲染。

​

@import url('https://fonts.googleapis.com/css?family=Varela+Round');

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

h1 {
  position: relative;
  display: inline-block;
  font-family: Varela Round;
  font-size: 24px;
  text-transform: uppercase;
  font-weight: bold;
  color: #401f1c;
  margin: 40px; /* not required, only for demo purpose */
}

h1 span {
  color: #efcc4c;
}

h1:before,
h1:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

h1:before {
  bottom: -11px;
  width: 40px;
  border-bottom: 3px solid #efcc4c;
  z-index: 1;
}

h1:after {
  width: 80%;
  border-bottom: 1px solid #ddd;
  bottom: -10px;
}

<h1>Our <span>Services</span></h1>

​

编辑:重构了我的代码，使演示更加精确。

Answer 2

尝尝这个

HTML

<div class="text">
  <span>our</span>
  Services
</div>

CSS

.text{
  font-weight:600;
  font-size:25px;
  color:red;
  position: relative;
  display:inline-block;
}
.text::after,
.text::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  margin:auto;
  border-radius:5px;
  height:0px;
}

.text::before{
  width:100%;
  border:1px solid #ccc;
}
.text::after{
  width:50%;
  border:2px solid red;
  bottom:-6px;
}

.text span{
  color:#000000;
}

Link for reference

希望这能帮上忙..

Answer 3

我总是创建"divider"，像这样：

<div class='divider'>
    <div class='divi-1'></div>
    <div class='divi-2'></div>
    <div class='divi-3'></div>
</div>

CSS：

.divider{
    padding-top:15px; //or other
    text-align:center;
    display:block; // or column in bootstrap like col-md-12
}

.divider .divi-1{
    display:inline-block;
    height:2px; //or other
    width:50px; // or other
    background:#e5e5e5;
.

.divider .divi-2{
    display:inline-block;
    height:2px;
    width:50px;
    background:#000000;
}
.divider .divi-1{
    display:inline-block;
    height:2px; //or other
    width:50px; // or other
    background:#e5e5e5;
}

就是这样。你也可以使用垂直对齐的内联块，这样你就有了更多的选项来垂直移动线条...此外，它在流中，因此您知道它的大小，并可以确保其他元素不会与其重叠。