CSS3:before、afterセレクタとcontent

goto_jp 455views 更新:2014年2月12日

beforeとafterセレクタは、その名の通り設定した要素の前後にスタイルを定義するセレクタです。

表示サンプルはこちら。
http://jsdo.it/goto_jp/iHdW

サンプルのHTML

<p class="gekiteki">>なんということでしょう<</p>

サンプルのCSS

.gekiteki:before {
    content:"ビフォー";
}
.gekiteki:after {
    content:"アフター";
}

「content」はbefore/afterセレクタの中のみで使えるプロパティで、テキストを挿入することができます。CSSで矢印を作る時も空っぽの指定をして実体を作る時に使います。

contentのテキストはドラッグ選択できないのでCSSが分かる人でなければコピペできないテキストを作ることもできますし、応用すると色々面白いことができるプロパティです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません