如何在CSS中为文本创建双下划线和点线下划线？

Question

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

border-bottom: 1px dotted #oof

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

- Shades88

---

你说的“double dotted”是什么意思？ - Artem Oliynyk

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 Coyier关于浏览器支持的文章也是值得的 - http://css-tricks.com/9189-browser-support-pseudo-elements/

- 9miles

Answer 2

您需要使用至少两个HTML元素来实现这个目标：

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

.outer和.inner应该有相同的虚线底部边框，但是.outer还应该有几个像素的padding-bottom。 在这里查看示例。

- Jon

Answer 3

绝对不需要两个元素来实现这个...

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

- Sydandish

---

这将产生实线而不是虚线，因此需要两个元素。 - Daniel P

Answer 4

尝试在其下添加一个非常薄的div，并设置其border-top或border-bottom为1px点状。然后，您可以根据需要调整CSS以使其适合并创建所需的双点线。

不，无法在同一元素上执行此操作，您必须从外部执行。

- Joze