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的像素。

See an example here

Answer 3

绝对不需要两个元素来做到这一点......

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

Answer 4

尝试在它下方添加一个非常薄的div，并设置边框顶部或边框底部1px点缀。然后你可以相应地使用CSS来使它适合并制作你想要的双点划线。

并且不可能在同一个元素上进行，你必须从外面去做。

如何在css中为文本创建双重，虚线下划线

4 个答案: