CSSで記号や文字を表示する「:before」と「:after」

何らかの事情でHTML上に記号や文字などを記述したくない場合、「:before」と「:after」を使えば、CSSで記号や文字を表示させることができます。

要素の前に表示させる場合は「:before」を、後に表示させる場合は「:after」を指定します。

要素:before {content:"記号や文字";}
要素:after {content:"記号や文字";}

例えば、当サイトのタイトルは以下のようになっています。

<h1>ホームページの作り方</h1>

このタイトルの「後」に「☆彡」マークを表示させたい場合、通常は以下のようにHTMLにそのまま記述すれば、特に問題なくそのまま表示されます。

①HTMLに直接記述する場合

<h1>ホームページの作り方☆彡</h1>

■実際の表示

HTMLに直接記述した場合

けれども、この「☆彡」マークは記号のため、検索エンジンはこの意味を理解できません。そのようなSEO対策上の理由で、h1などの重要な箇所には記号を使いづらい場合、「:before」や「:after」を使ってCSSの方で指定することもできます。

②CSSに記述する場合

<h1>ホームページの作り方</h1>

h1:after {content:"☆彡";}

■実際の表示

CSSに「:after」を記述した場合

このように、HTMLに記述した場合と全く同じように表示されます。

さらに、色や太さなども指定した場合は以下のようになります。

h1:after {
content:"☆彡";
color:#F90;
font-weight:bold;
}

■実際の表示

「:after」の使用例

概ね、この「:before」や「:after」については、同一ページで何度も繰り返し使用する記号について、あらかじめCSSで指定しておく使い方をすると便利です。

例えば、当サイトでは見出しの先頭部分でワンポイント的に「■」の記号を使用していますが、このような記号については「:before」や「:after」を使い、あらかじめCSSで指定しておくとよいでしょう。

「:before」や「:after」による検索エンジンへの影響

注意したい点は、この「:before」や「:after」は文字もCSSで表示させることができるため、HTMLに記述しているコンテンツとまったく別の内容を表示させることも可能になる点です。

例えば、以下のように記述すれば、HTML上では空白で何も記述されていないのに対し、実際のサイト訪問者には文字列が表示されてしまうことになります。

<h1></h1>

h1:after {content:"ホームページの作り方☆彡";}

やろうと思えば、HTML上の全ての文字列をCSSで記述することもできるかと思います。

結果として、「検索エンジン」と「サイト訪問者」に違うコンテンツを表示させてしまう可能性があり、このような使い方は検索エンジンに悪影響が出てしまう可能性も否定できません。

ただし、隠しテキストによるキーワードの埋め込みではないため、普通に使用している限り、実際に検索エンジンスパムになる可能性はほぼないと感じています。実際、当サイトでも「:before」や「:after」は多用してますが、検索エンジンへの悪影響を感じたことは一度もありません。

普通に使用している限り、SEO対策上の影響は全く問題ないと言えるでしょう。