实现效果如下:
实现这个效果,我们可能直接使用图标,可能内嵌一个 span
标签,也可能会使用 ::before
和 ::after
伪元素,不过这其实利用 border
就可以实现,上述效果的代码如下所示:
div {
width: 38px;
height: 6px;
border-top: 18px double #F70776;
border-bottom: 6px solid #F70776;
}
由于 border
的颜色是继承自 color
的,所以利用以上代码,我们可以很轻松的实现一个 hover
变色效果,改写后的代码如下:
div {
width: 38px;
height: 6px;
border-top: 18px double;
border-bottom: 6px solid;
color: #F70776;
cursor: pointer;
transition: all 1s;
}
div:hover {
color: green;
}
这个技巧是在张鑫旭的教学视屏中看到的,地址如下:CSS 深入理解之 border.