で？そもそも擬似要素の::before(:before)と::after(:after)って何がどうなってどう使えるの？

tutorial
 
 

copypet.jpでも頻繁に使っている::before(:before)と::after(:after)ですが、コピペだけしていると調整やプラスアルファのデザインを加えたい時に悩んでしまうこともあるでしょう。
とりあえずコピペすりゃええと思うが、だがしかし・・・何がどうなっているかは知っておきたい。とこっそり思っておられる方のために「何とな〜くわかる」から「知ってる！知ってる！」ぐらいになるよう説明しておきます。

擬似要素ってなに？

擬似要素[Pseudo-elements]

cssの擬似要素というのはセレクターに追加するキーワードで、セレクターとして選択された要素（タグの塊）に追加することで「擬似的な要素」を作ることができるようになります。

擬似クラスというものもありますが、擬似クラスはセレクターに追加するキーワードで、セレクターとして選択された要素（タグの塊）に対して特定の状態を指定することができるものです。
よく見かける「:hover」や「:checked」は擬似クラスです。

擬似要素の種類（よく使うもの）

::before　　　　選択した要素の最初の子要素として擬似要素を作成
::after　　　　　選択した要素の最後の子要素として擬似要素を作成
::first-letter　ブロックレベル要素の最初の行の最初の文字にスタイルを適用
::first-line　　ブロックレベル要素の最初の行にスタイルを適用

「::」「:」の違いは？
CSS3で擬似クラスと擬似要素を見分けるために「::」が導入されました。
「::」はCSS3対応のブラウザのみですが「:」はCSS3未対応のブラウザでも表示することが可能です。
IE8以下などのCSS3未対応のブラウザを無視できない場合以外は「::」で良いでしょう。

::before(:before)と::after(:after)の基本的な使い方

まずは通常のHTML&CSS

例えば下記サンプルのように設定した場合、セレクターとして選択された要素（タグの塊）「<h1>見出しテキスト</h1>」この「h1」に指定した「background: #f8bbd0;」が反映されます。

ニャン易度

見出しテキスト

<h1>見出しテキスト</h1>
h1 {
	background: #f8bbd0;
}

次に擬似要素を追加

擬似要素を追加するためには「content」プロパティを使用することが必須です。
中身を入れる予定がなくてもカラのままでいいので使用します。
これをつけると擬似要素として認識されます。また「content」プロパティはインラインです。
下記サンプルのように要素の前後に「content」プロパティで指定した文字が入ります。

ニャン易度 
<h1>見出しテキスト</h1>
h1 {
	background: #f8bbd0;
}
h1::before {
	content: '656565';
	color:#df007f;
}
h1::after {
	content: '636363';
	color:#f09716;
}

ソースを展開してみよう

この時のhtmlソースを実際のブラウザで表示された時の状態で展開した、要素（タグの塊）に対する擬似要素の配置がこちら。

<h1>
	::before ♥♥♥
	見出しテキスト
	::after ♦︎♦︎♦︎
</h1>
Chromeデベロッパーツール（検証モード）を使うとこの展開されたものが確認できるので、非常に便利です。
気になるサイトのソースを勉強するのにもよく使います。

「リボン風（両端の方向を別々に）見出し」を作ってみよう

見出しテキスト

擬似要素を使って作ることができるシンプルな見出しです。
こちらのサンプルを次のステップを追って説明します。

  1. h1要素を作る
  2. 擬似要素を追加する（::before部分）
  3. 擬似要素を追加する（::after部分）
  4. 共通する擬似要素をまとめる

h1要素を作る

まずは<h1>タグに装飾をします。
この時、擬似要素を配置するための基準を「position: relative;」で設定します。
ニャン易度

見出しテキスト

<h1>見出しテキスト</h1>
h1 {
	position: relative;/*擬似要素を配置するための基準にする*/
	padding: .3em;
	background-color: #B2EBF2;
	color: #0097A7;
}

擬似要素を追加する（::before部分）

次に擬似要素（::before部分）を用意し、ここに三角形を作り配置します。
三角形の書き方はいろいろありますが、サンプルは線種・色・サイズごとにまとめて記述しています。
その他に、位置ごとに書いていく方法や基本の線種・色・サイズをまとめてから変えたいところだけ打ち消す方法などもあります。
ニャン易度

見出しテキスト

サンプルは三角形を作る設定を線種・色・サイズごとにまとめて記述しています。

位置ごとに書いていく方法であれば下記でもOK。 
{
	border-top: 0 solid transparent;
	border-right: 15px solid #0097A7;
	border-bottom: 15px solid transparent;
	border-left: 0 solid transparent;
}


基本の線種・色・サイズをまとめてから変えたいところだけ打ち消す方法ならばこちら。 
{
	border-style: solid;
	border-color: transparent;
	border-width: 0 15px 15px 0;
	border-right-color: #0097A7;
}
<h1>見出しテキスト</h1>
h1 {
	position: relative;/*擬似要素を配置するための基準にする*/
	padding: .3em;
	background-color: #B2EBF2;
	color: #0097A7;
}
h1::before {
	content: '';
/*h1で指定した基準に対して相対配置をする*/
	position: absolute;
/*h1のコンテンツの上からの位置*/
	top: 100%;
/*h1のコンテンツの左からの位置*/
	left: 0;
/*三角形を作る設定*/
	/*ボーダーのスタイルは直線に設定*/
	border-style: solid;
	/*rightだけに色を設定*/
	border-color: transparent #0097A7 transparent transparent;
	/*三角を作るためにrightとbottomのサイズを指定それ以外は0に*/
	border-width: 0 15px 15px 0;
}

擬似要素を追加する（::after部分）

次に擬似要素（::after部分）を用意し、ここに三角形を作り配置します。
三角形の書き方はいろいろありますが、サンプルは線種・色・サイズごとにまとめて記述しています。
その他に、位置ごとに書いていく方法や基本の線種・色・サイズをまとめてから変えたいところだけ打ち消す方法などもあります。
ニャン易度

見出しテキスト

サンプルは三角形を作る設定を線種・色・サイズごとにまとめて記述しています。

位置ごとに書いていく方法であれば下記でもOK。 
{
	border-top: 0 solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid  #0097A7;
	border-left: 0 solid transparent;
}


基本の線種・色・サイズをまとめてから変えたいところだけ打ち消す方法ならばこちら。 
{
	border-style: solid;
	border-color: transparent;
	border-width: 0 15px 15px 0;
	border-bottom-color: #0097A7;
}
<h1>見出しテキスト</h1>
h1 {
	position: relative;/*擬似要素を配置するための基準にする*/
	padding: .3em;
	background-color: #B2EBF2;
	color: #0097A7;
}
h1::before {
	content: '';
/*h1で指定した基準に対して相対配置をする*/
	position: absolute;
/*h1のコンテンツの上からの位置*/
	top: 100%;
/*h1のコンテンツの左からの位置*/
	left: 0;
/*三角形を作る設定*/
	/*ボーダーのスタイルは直線に設定*/
	border-style: solid;
	/*rightだけに色を設定*/
	border-color: transparent #0097A7 transparent transparent;
	/*三角を作るためにrightとbottomのサイズを指定それ以外は0に*/
	border-width: 0 15px 15px 0;
}
h1::after {
	content: '';
/*h1で指定した基準に対して相対配置をする*/
	position: absolute;
/*h1のコンテンツの上からの位置*/
	top: -15px;
/*h1のコンテンツの右からの位置*/
	right: 0;
/*三角形を作る設定*/
	/*ボーダーのスタイルは直線に設定*/
	border-style: solid;
	/*bottomだけに色を設定*/
	border-color: transparent transparent #0097A7 transparent;
	/*三角を作るためにrightとbottomのサイズを指定それ以外は0に*/
	border-width: 0 15px 15px 0;
}

共通する擬似要素をまとめる

最後に同じことをずらずら書いていてもわかりにくいので共通して使っているものはまとめて書いちゃいましょう。
ニャン易度

見出しテキスト

<h1>見出しテキスト</h1>
h1 {
	position: relative;
	padding: .3em;
	background-color: #B2EBF2;
	color: #0097A7;
}
h1::before,
h1::after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 0 15px 15px 0;
}
h1::before {
	top: 100%;
	left: 0;
	border-color: transparent #0097A7 transparent transparent;
}
h1::after {
	top: -15px;
	right: 0;
	border-color: transparent transparent #0097A7 transparent;
}
  • 必ず「content」プロパティを指定しよう。（中身はカラでもOK）
  • 位置を指定する場合は要素に「position: relative;」を指定。擬似要素に「position: absolute;」を指定して相対位置を設定しよう。
  • 同じ設定はまとめて書いちゃおう。
といった具合で、うまく使うことでhtmlに手を入れずに装飾を追加したり、複雑なデザインを実現したりとなかなか便利な擬似要素の::before(:before)と::after(:after)ですので、いろいろと使ってみてはいかがでしょうか。

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？