::beforeと::afterで記号や文字をCSSで表示する
（更新 ）
HTML上に記号や文字を直接書きたくない場合、h2::beforeなどのように、CSS側で「::before」や「::after」を使うことで、その前後に記号や文字を疑似的に表示させることができます。
例えば、h2やliなどの要素の前に記号や文字を表示させる場合は「::before」を指定します。
要素::before {
content:"記号や文字";
}一方、後に表示させる場合は「::after」を指定します。
要素::after {
content:"記号や文字";
}これは疑似要素と呼ばれており、CSS2ではコロンひとつで「:before」の書き方でしたが、CSS3以降はコロン2つの「::before」の書き方に統一され、「:hover」などの疑似クラスと区別されています。ただ、以前の「:before」や「:after」の書き方でも依然として有効です。
上記のうち、「要素::before」がセレクタ＋疑似要素、「content」がプロパティ、「"記号や文字"」が値になります。
例えば、以下のようなリストタグがあったとします。
<ul class="sample">
<li>りんご</li>
<li>ばなな</li>
<li>スイカ</li>
</ul>■HTMLに直接記述する場合
このリストの前に「☆」を表示させたい場合、通常は以下のようにHTMLタグ内でそのまま記述すれば、特に問題なく表示されます。
<ul class="sample">
<li>☆りんご</li>
<li>☆ばなな</li>
<li>☆スイカ</li>
</ul>【実際の表示】
- ☆りんご
- ☆ばなな
- ☆スイカ
けれども、記号をHTMLに直接記述したくない場合、CSSで「::before」や「::after」を指定することで、同じように表示させることができます。
■CSSに記述する場合
.sample li::before {
content: "☆";
}
.sample li {
list-style:none;
}【実際の表示】
- りんご
- ばなな
- スイカ
さらに、色や太さなども指定する場合は以下のようになります。
.sample li::before {
content: "☆";
color:#F90;
font-weight:bold;
}
.sample li {
list-style:none;
}【実際の表示】
- りんご
- ばなな
- スイカ
この「::before」や「::after」については、同一ページで何度も繰り返し使用する記号について、あらかじめCSSで指定しておく使い方をすると便利です。
例えば、当サイトでは見出しの先頭部分でワンポイント的に「■」の記号を使用していますが、このような記号については「::before」や「::after」を使い、あらかじめCSSで指定しておくとよいでしょう。
::beforeや::afterによる検索エンジン対策への影響
この「::before」や「::after」の疑似要素につきまして、検索エンジンはCSSに記述されたcontentは装飾とみなすため、意味のあるテキストとしては扱われません。
一方で、疑似要素は文字もCSSで表示させることができるため、HTMLに記述しているコンテンツとまったく別の内容を表示させることも可能になります。
例えば、以下のように記述すれば、HTML上では空白で何も記述されていない状態でも、実際のサイト上では文字列が表示されてしまうことになります。
<h1></h1>h1::before {
content:"ホームページの作り方";
}結果として、「検索エンジン」と「サイト訪問者」に違うコンテンツを表示させてしまうことになり、このような使い方は検索エンジンスパムと見なされる可能性があります。
そのため、記号などを装飾の目的で普通に使用している限り、検索エンジンスパムになる可能性はありませんが、意味のあるテキストを指定するのは避けることをおすすめします。