CSS3 Pre-Reference



::outside

要素のラッパー

試す

コード

p::outside {
    border: 1px solid blue;
}
p::outside(2) {
    border: 1px solid red;
}
p::outside(3){
    border: 1px solid green;
}

サンプル

すべての段落の周りに内側から青、赤、黄色のボーダーの順で囲われていれば対応しています。

吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。なぜそんな無闇(むやみ)をしたと聞く人があるかも知れぬ。

その後(けむり)したから火がある。ただその日がよかろう度毎まった。

コメントする


対応ブラウザ

Firefox
Chrome/Safari
Opera
InternetExplorer
まだ

パラメータ

レベル 3
参考文献 CSS3 Generated and Replaced Content Module#4.3. Wrapping elements in pseudo-elements with '::outside'

解説

要素の外側にラッパーを追加します。

この疑似要素の出現で、不要なラッパーを量産する必要が無くなり、本当にシンプルなHTMLを実現・・・できるはずでしたが、未だにどのモダンブラウザも実装しません。

この疑似要素には、(おそらく)"content"で内容を追加することができません。

::before::after同様、::outsideの複数個指定(::outside(n)という記述で実現)が可能です。

トラックバック

投稿されたコメント