サイトレビュー
【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデ...
2021.02.28
2020.12.09
今回の記事では、文字の横にアイコンを配置するときなどに便利な擬似要素(::before / ::after )についてご紹介します。
目次
擬似要素とは、cssセレクタに追加することで、要素の前後に内容を挿入することができます。
下記の例のように、cssセレクタに「::before」または「::after」を付記し、追加したい文字を「content:”〜〜”;」で指定することで再現できます。
【HTML】 <p>擬似要素</p> 【CSS】 p{ font-weight: bold; } p::before{ content:"「::before」で追加"; font-weight: normal; margin-right: 15px; background: khaki; padding: 3px 13px 3px 0px; } p::after{ content:"「::after」で追加"; font-weight: normal; margin-left: 15px; background: khaki; padding: 3px 13px 3px 0px; }
見出しに英語の表記を追記する際に活用できます。
この場合は、positionを使用して位置を調整することで、画面幅に応じた位置変更などにも対応できます。
【HTML】 <h1>サンプル</h1> 【CSS】 h1{ position: relative; display: inline-block; font-size: 16px; } h1::after{ position: absolute; content: "sample"; font-size: 8px; left: 50%; transform: translateX(-50%); bottom: -15px; color: royalblue; }
箇条書きを行うときの記号にも活用できます。
【HTML】 <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> 【CSS】 li{ list-style: none; } li::before{ content: "◆"; padding-right: 5px; color: royalblue; }
上記の例では、「◆」を使用しましたが、ここは「url( )」で指定することで、お好きな画像を用いることもできます。
これまでの例では、文字(または記号)を追加しましたが、装飾を追加することも可能です。
【HTML】 <ul> <li>あああ</li> <li>いいい</li> <li>ううう</li> </ul> 【CSS】 ul{ display: flex; } li{ list-style: none; position: relative; padding: 10px; } li::after{ content: ""; position: absolute; width:1px; height: 20px; background: royalblue; margin-left: 10px; top:50%; transform: translateY(-50%); }
今回の場合は、「content: ” ” 」は空白とし、背景色で境界線を再現しています。追加する文字が無い場合でも「content」の指定は必要ですので、忘れないように気をつけてください。
このように様々な場面で活用できますので、ぜひ使ってみてください。
株式会社スピカデザイン