css - cssで幅を継承しない方法は？

Question

だから私はこのhtmlを持っています：

<p>here is some <span>random</span> content that I might use</p>​

そしてこのcss：

span{
    position: relative;
}

span:before{
    content: 'this is more content';
    position:absolute;
    color: red;
    top: -15px;
}

何が起こるかというと、cssで追加されたコンテンツは、span（「ランダム」という単語）の幅を継承します。継承をオーバーライドするために幅の値を追加せずに、継承された幅を削除する方法はありますか

これがデモですhttp://jsfiddle.net/7dBbZ/1/ ありがとう</p>

Answer 1

探しているのはwhite-space:nowrap;、要素がでレンダリングされるためですdisplay:inline。widthBoltClockが指摘しているように、これは実際には継承されません。暗黙的に継承されたプロパティではなく、親要素をラッピングが許可された状態で埋めます。

http://jsfiddle.net/7dBbZ/5/

のさまざまな値で遊んでみて、自分のcontent目で確かめてください（つまり、親要素より短いテキスト、スペースのないテキストなど）

Answer 2

これを試して：

span:before {
    white-space: nowrap;
}