css - 如何在CSS中为文本创建双点下划线

Question

我们如何在 CSS 中创建双点下划线？我使用 border-bottom 属性。

border-bottom: 1px dotted #oof

但只出现单点下划线。我们如何创建双下划线？可能吗？

Answer 1

为了节省使用额外标记的时间，您可以使用“after”伪元素应用额外边框。看看 fiddle ! - http://jsfiddle.net/sg2My/38/

.elem {
    border-bottom:1px dotted #f00;
    /* padding-bottom:1px;*/
    position:relative;
}

.elem:after {
    border-bottom:1px dotted #000;
     content:'';
    left:0;
    position:absolute;
    bottom:-3px;
    width:100%;
}

此外，可能值得查看有关浏览器支持的 Chris Coyiers 文章 - http://css-tricks.com/9189-browser-support-pseudo-elements/