こんにちは。
新米コーダーです。

このブログのマークアップ関連記事でも既に何度か登場しているcss擬似要素の「:before」や「:after」。
普段目にしていてもコピペでしか使ったことがなく、きちんと理解できていなかったため自主的に使用することはあまりありませんでしたので、今回は「:before」「:after」の基本的な使い方についてまとめてみました。

擬似要素とは？

条件によって違うcssを当てることが可能になるものです。
よく使われるものに、以下のようなものがあります。

  • :hover
  • :first-child , :last-child
  • :before , :after

「:hover」では、a要素に対してホバー時のスタイルを指定できます。
また「:first-child」「:last-child」ではそれぞれ、複数ある要素のうちの最初と最後にスタイルを指定します。
このように、擬似要素を使うと、同じ要素でも違うスタイルを当てることが可能になるのです。
今回説明する「:before」「:after」では、要素の前後に別の内容を生成することができます。

文字を追加する

例えば、こんなHTMLがあったとします。

【html】

<p class="text">HTML要素</p>

HTML要素

ここに以下のcssを指定してみます。

【css】

p.text:before {
content: "（before）";
}
p.text:after {
content: "（after）";
}

HTML要素

このように、content: “”;の中に文字列を指定することによって、「:before」では要素の前方に、「:after」では要素の後方にそれぞれ生成されます。

文字にスタイルを指定する

生成した要素にスタイルを指定することも可能です。

  • リスト
  • リスト
  • リスト

【html】

<ul class="list">
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>

【css】

l.list li:before {
content: "※";
color: #e8391b;
margin-right: 5px;
font-weight: 700;
}
ul.list li:after {
content: "new!";
color: #ec971f;
font-size: 11px;
margin-left: 5px;
}

擬似要素は繋げて書くことができるので、「:first-child」などと組み合わせることで、複数の要素のうち特定の要素のみに生成することも可能になりますね！
繋げて書くときは「:first-child」「:after」をそのまま合体させて「:first-child:after{　}」で指定できます。
ちなみに擬似要素はインライン要素なのでご注意を。

画像を挿入する

content : url() ;の中に画像のパスを記入することによって画像の挿入も可能になります。
例えば、以下のような枠つきのボックスがあったとします。

【html】

<div class="box">
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

【css】

div.box{
width: 200px;
height: 102px;
border-radius: 5px;
border: solid #00a0e9 3px;
padding: 10px;
position: relative;
}

テキストテキストテキストテキストテキストテキストテキスト

ここに下の三角形の画像を挿入することで、吹き出しのようなボックスを作ることができます。

【css】

div.box:after {
content: url(triangle.png);
display: block;
position: absolute;
left: 20px;
bottom: -32px;
}

テキストテキストテキストテキストテキストテキストテキスト

このように、デザインの幅が広がってとっても便利ですね！

最後に

いかがでしょうか。
無駄なhtmlが出力されないので、htmlを汚さずに書ける点がメリットですね。
また気をつけるべきなのが、content: “”;で指定した中身は疑似的に生成しているだけなため、文字として認識されないのでドラッグしても選択されません。
ですので、重要なキーワードをここに入れても、SEO的に意味が無いということにご注意下さい。

使いどころを考えて使用すると、表現の幅が広がりとっても便利なので、是非実践してみて下さい！

お問い合わせ