CSSの疑似要素とは、指定した要素にスタイルを適用するものです。beforeは要素の直前、afterは要素の直後に疑似的に要素を作るイメージです。これを使って吹き出しやオーバーレイなど様々な装飾を作ることが出来ます。
１．疑似要素の作り方
要素に対して疑似要素のbeforeまたはafterを指定します。どちらを使っても構いません。下記はbeforeを使って幅300px高さ200px背景オレンジ色の要素に、幅50px高さ50px背景ブルーの疑似要素を作っています。
CSSのプロパティで重要なのは.boxにposition:relativeの指定と.box::beforeにcontent:””;とposition:absoluteの指定です。positionの指定により疑似要素が絶対位置となります。
See the Pen 疑似要素 by 89design (@design-89) on CodePen.
２．吹き出しを作る
先ほど作った疑似要素をCSSで位置調整します。オレンジの四角の右に吹き出しを作る想定です。
.boxの幅が300pxなので.box::beforeにleft:300pxを指定することにより、右に配置されます。そしてtopを50%の位置に変更し、要素の50%分をtransformでマイナスして縦位置を中央にします。
See the Pen 疑似要素part2 by 89design (@design-89) on CodePen.
位置調整した疑似要素をborderを使って三角形にします。（borderを使った三角形の作り方は別記事で紹介したいと思います。）
See the Pen 疑似要素part3 by 89design (@design-89) on CodePen.
以上で簡単な吹き出しの完成です。サンプルでは右向きの吹き出しですが、疑似要素の位置を変えれば上下左右どの方向でも吹き出しを作れます。疑似要素はちょっとした装飾にとても便利なので覚えておくと良いと思います。
