copypet.jpでも頻繁に使っている::before(:before)と::after(:after)ですが、コピペだけしていると調整やプラスアルファのデザインを加えたい時に悩んでしまうこともあるでしょう。
とりあえずコピペすりゃええと思うが、だがしかし・・・何がどうなっているかは知っておきたい。とこっそり思っておられる方のために「何とな〜くわかる」から「知ってる！知ってる！」ぐらいになるよう説明しておきます。
cssの擬似要素というのはセレクターに追加するキーワードで、セレクターとして選択された要素（タグの塊）に追加することで「擬似的な要素」を作ることができるようになります。
::before 選択した要素の最初の子要素として擬似要素を作成
::after 選択した要素の最後の子要素として擬似要素を作成
::first-letter ブロックレベル要素の最初の行の最初の文字にスタイルを適用
::first-line ブロックレベル要素の最初の行にスタイルを適用
例えば下記サンプルのように設定した場合、セレクターとして選択された要素（タグの塊）「<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>
<h1>見出しテキスト</h1>h1 {
position: relative;/*擬似要素を配置するための基準にする*/
padding: .3em;
background-color: #B2EBF2;
color: #0097A7;
}
次に擬似要素（::before部分）を用意し、ここに三角形を作り配置します。{
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部分）を用意し、ここに三角形を作り配置します。{
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;
}
といった具合で、うまく使うことでhtmlに手を入れずに装飾を追加したり、複雑なデザインを実現したりとなかなか便利な擬似要素の::before(:before)と::after(:after)ですので、いろいろと使ってみてはいかがでしょうか。 
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info
よく見かける「:hover」や「:checked」は擬似クラスです。