如何在css中爲文本創建雙點劃線下劃線

如何在CSS中創建雙點劃線？我使用border-bottom屬性。如何在css中爲文本創建雙點劃線下劃線

border-bottom: 1px dotted #oof

但只出現單點式下劃線。我們如何創建雙重下劃線？可能嗎？

2011-09-09 Shades88

你是什麼意思說「雙點」？ – ntvf

您需要使用至少兩個HTML元素來實現這一目標：

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

兩個.outer和.inner應具有相同點底部邊框，但.outer應該有padding-bottom幾個像素爲好。

See an example here。

來源

2011-09-09 07:39:14 Jon

嘗試在它下面添加一個非常薄的div，並將邊框頂部或邊框底部1px設置爲虛線。然後，您可以相應地使用CSS來使其適合並製作您想要的雙點線。

不，不可能在同一個元素上做，你必須從外面做。

來源

2011-09-09 07:39:12 Joze

要使用額外的標記保存自己，您可以使用'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%; 
}

此外，可能需要檢查瀏覽器的支持，克里斯Coyiers文章 - http://css-tricks.com/9189-browser-support-pseudo-elements/

來源

2011-09-09 11:07:38 9miles

絕對不需要兩種元素做到這一點...

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

來源

2013-04-07 08:50:10 Sydandish

這將產生實線而不是虛線，所以是的，它需要兩個元素。 – Gh0sT

如何在css中爲文本創建雙點劃線下劃線

回答

相關問題