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

Question

有没有更好的方法来创建这种＆＃34;下划线＆＃34;通过CSS，除了为它创建背景图像？

要明确的是，我只对＆＃34;重复的行＆＃34;感兴趣。效果，更粗，更短的线直接坐在更薄更长的不同颜色的线上。谢谢！

Answer 1

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

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

请确保您不会错过z-index，因为在此处使用非常重要，否则其他边框将在较小的边框上呈现。

＆＃13;

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：重构我的代码并使演示更精确。

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

我总是创建＆＃34; divider＆＃34;，如：

<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;
}

就是这样。你也可以使用vertical-align作为内联块，这样你就可以有更多的选项来移动直线上的线......以及它在流程中的位置，所以你知道它有多大的尺寸，并且可以确保其他元素获胜＆＃ 39;重叠它。