今回はHTMLの疑似要素についてです。
言葉はかなり難しいと思うのですが、簡単です。
それではいってみましょう！
Menu
文字の先頭に適用（first-letter）
構文
要素 : first-letter
内容
指定要素の文字の先頭に適用されます。
※インライン要素は適用されません。
【HTML】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <ul> <li>サンプル1-1</li> <li>サンプル1-2</li> <li>サンプル1-3</li> <ul> <li>サンプル2-1</li> <li>サンプル2-2</li> <li>サンプル2-3</li> <ul> <li>サンプル3-1</li> <li>サンプル3-2</li> <li>サンプル3-3</li> <ul> <li>サンプル4-1</li> <li>サンプル4-2</li> <li>サンプル4-3</li> </ul> </ul> </ul> </ul> |
【CSS】
1 2 3 4 5 6 7 | li { list-style: none; } li:first-letter { color: red; } |
【結果】
文字の先頭の → サが赤色になります。
See the Pen jOrXJGq by tomoy777 (@tomboy777) on CodePen.
文字の先頭に挿入（before）
構文
要素 : before
内容
・要素の先頭に文字列・画像などが挿入できます。
【HTML】
1 2 3 4 5 6 7 8 9 10 | <ul> <li>サンプル1-1</li> <li>サンプル1-2</li> <li>サンプル1-3</li> <ul> <li>サンプル2-1</li> <li>サンプル2-2</li> <li>サンプル2-3</li> </ul> </ul> |
【CSS】
・contentプロパティで値を指定します。
1 2 3 4 5 6 7 | li { list-style: none; } li:before { content: "【before】"; } |
【結果】
li要素の先頭に →【before】が挿入されます。
See the Pen RwREdez by tomoy777 (@tomboy777) on CodePen.
文字の末尾に挿入（after）
構文
要素:after
内容
・要素の末尾に文字列・画像などが挿入できます。
【HTML】
1 2 3 4 5 6 7 8 9 10 | <ul> <li>サンプル1-1</li> <li>サンプル1-2</li> <li>サンプル1-3</li> <ul> <li>サンプル2-1</li> <li>サンプル2-2</li> <li>サンプル2-3</li> </ul> </ul> |
【CSS】
・contentプロパティで値を指定します。
1 2 3 4 5 6 7 | li { list-style: none; } li:after { content:"【after】"; } |
【結果】
li要素の末尾に →【after】が挿入されます。
See the Pen KKMbEOq by tomoy777 (@tomboy777) on CodePen.
画像を挿入
画像を挿入する場合はcontentプロパティのurlにパスを記述してあげます。
サンプルコード
リンクの先頭に画像を挿入する場合
文字と画像の縦の位置がずれる場合はposition: relativeのtopを調整します。
1 2 3 4 5 | a:before { content: url(sample.jpg); position: relative; top: 5px; } |
画像は実際にブログで使用しています。下記ページでご確認ください。
まとめ
まだ他にも疑似要素はありますが使用しそうなものだけご紹介しました。
疑似要素？もうこの言葉見ただけで頭の中が？マークだらけですね(Ｔ▽Ｔ)
でもなんとなく便利に利用できそうですね(*^^)v
以上です。
