18

:after次の場合、によって生成されたテキストがスパンのボックスの外側になるようにするにはどうすればよいですか? (現在は内部でレンダリングされています。つまり、span要素の幅が広くなります)

HTML

<span class="my">Boxtext</span>

CSS

span.my {
    padding:            4px 8px;
    background-color:   red;
    display:            inline-block;
    border-radius:      10px;
    margin-left:        20px;
    }   
span.my:after {
    content:            " text that is supposed to come after the box";
    }

これは、内側または外側を選択できる list-style-position に多少似ていると思います...

4

2 に答える 2

9

CSSコンテンツは、それがレンダリングされたオブジェクトの一部と見なされていると思います。:after名前が付けられているはずの引数を作成できます:append。

あなたの場合、あなたは中に余分な要素を入れてみることができますspan.my：

<span class="my"><span>Boxtext</span></span>
span.my span { ... }
span.my:after { ... }

または、コンテンツを具体的にスタイリングします。

span.my:after { 
    content:            " text that is supposed to come after the box";
    background-color:   white;
    position:           absolute;
    margin-left:        10px;
}
于 2012-04-09T18:00:13.763 に答える
5

疑似要素の cssで使用するだけposition: absoluteです。::after {}

span.my:after {
    content: " text that is supposed to come after the box";
    position: absolute;
    left: 100%;
}​

もちろん、親要素でposition: relative;(またはその他の値)を使用することを忘れないでください。positionspan.my

JS フィドルのデモ。

また、疑似要素::after(および) は、それが「アタッチ」されているスパンから継承するため、 を継承するため、その要素の CSS で明示的にオーバーライドする必要がある場合があることも覚えておいてください。::beforewidth

于 2012-04-09T18:08:58.093 に答える