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

Question

如何在CSS中创建双虚线?我用了border-bottom属性。

border-bottom: 1px dotted #oof

但是只出现一个点下划线。如何创建双下划线?

Answer 1

为了避免使用额外的标记，您可以使用'after'伪元素应用额外的边框。看看小提琴!- 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/

Answer 2

您需要使用至少两个HTML元素来实现这一点:

<span class="outer">
    <span class="inner">Your text here.</span>
</span>

.outer和.inner应该有相同的虚线底边，但.outer也应该有padding-bottom的几个像素。

Answer 3

绝对不需要两个元素来做这个…

.doubleUnderline{
    border-bottom: 3px double;
}

Answer 4

尝试在它下面添加一个非常细的div，并设置边框的顶部或底部1px虚线。然后你可以相应地调整CSS，使其适合你想要的双虚线。

不，这是不可能在同一元素上做的，你必须从外部做