css - Css3を使用した背景の水平線

Question

このタイプのスタイルをcss3のみを使用してテキストに実装する方法は、タグの中央に水平線があることを意味します...純粋なcssを使用して可能でしょうか...

これが私の構造です：-

<p class="datedAside">4 weeks ago</p>

Answer 1

p 内にスパンを追加することでそれを行う 1 つの方法を次に示します。

HTML:

<p class="datedAside"> <span> 4 weeks ago </span> </p>​

CSS:

p {background: #000; height:1px; margin-top:10px;}
p span{background: #fff; padding:10px; position:relative; top:-10px; left: 20px}​

デモ: http://jsfiddle.net/9GMJz/

Answer 2

私が知っている最も簡単な方法の 1 つは、次のように実現できます。

HTML

<p>Your text goes here</p>
<hr>

CSS

p {
    background: #fff; // or whatever is your bg-color
    display:inline-block;
    padding-right: 1em;
    line-height: 1.2em;
}

p+hr {
    margin-top: -0.6em;
}

JSFiddle http://jsfiddle.net/cTMXa/1/