::beforeと::afterを使った表現事例
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
全3回
CSSの疑似要素、::beforeと::afterは、装飾としてさまざまな使いみちがあります。本シリーズでは、実際のWebデザインでよくあるパターンでの::before疑似要素、::after疑似要素の活用例を紹介します。
最終回 線やボカシ処理による装飾
::before疑似要素、::after疑似要素の活用例として、テキストの左右への線の配置や、線のアニメーション、ホバー時のボカシのアニメーションを取り上げます。
第2回 リンク範囲の調整
::before疑似要素、::after疑似要素を利用して、リンク範囲を調整する例を紹介します。ブロック全体と別にボタンに機能を設定したり、Flexboxを使って横並びのナビゲーションを作るときのリンク範囲を調整します。
第1回 三角形の作成
::before疑似要素と::after疑似要素は、Webデザインで装飾の役割で利用するのにも適しています。ここでは、リンクの目印となる三角形を作成する方法を紹介します。