CSSでテキストの二重の点線の下線を作成するには

Question

CSSで二重の点線の下線を作成するにはどうすればよいですか？ border-bottomプロパティを使用します。

border-bottom: 1px dotted #oof

しかし、唯一つの点線の下線が表示されます。ダブルアンダーラインを作成するにはどうすればよいですか？出来ますか ？

Answer 1

あなたはこれを達成するために、少なくとも2つのHTML要素を使用する必要があります。

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

両方 .outer

と.innerは同じ点線の下の境界線を持っている必要がありますが、.outerは同様padding-bottomのいくつかのピクセルを持っている必要があります。

See an example here。

Answer 2

下に非常に細いdivを追加し、ボーダーの上端またはボーダーの下端を1pxドットで設定してみてください。それに合わせてCSSを使って遊んで、それをフィットさせ、あなたが望む二重の点線を作ることができます。

また、同じ要素ではできませんが、外部から行う必要はありません。

Answer 3

余分なマークアップを使用して自分自身を保存するには、 '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/

Answer 4

間違い

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