CSSを使って文字を追加してみよう！擬似要素とcontentで一括反映も簡単に！

一昔前のCSSだけで知識が止まっていると、回り込みや背景、文字色、サイズなどホームページの装飾関係に使うぐらいのイメージかもしれません。

ただCSSは実際にもっと勉強してみると、こんなことも簡単に出来た！というの実はあったりするんです。

その内の一つに、個人的にもとても使いやすいbeforeやafterの疑似要素とcontentプロパティを組み合わせたホームページの反映です。

最新記事にNEWマークをつけたい！や特定の部分だけに後々でいつでも文字が付けられる状態にしておきたいといった時などにかなり便利な技になります。

例えば最新記事の一番上だけにNEWマークをつけたい時。

更新記事をul,liで一覧にしていて、その一番上のタイトルだけにNEWマークをつけたい場合。

そんな時でもHTMLなどは触らずにCSSの指定だけでピンポイントに追加することができます。

4日目の更新記事です。
3日目の更新記事です。
2日目の更新記事です。
1日目の更新記事です。

上記のリストで最新記事の4日目の更新記事の後ろにNEWマークをつけたいとしましょう。

そんな時はこれでOK。

.news li:first-child:after{

content: "NEW";

color: #FF0000 !important;

}

実際のイメージ

• 4日目の更新記事です。
• 3日目の更新記事です。
• 2日目の更新記事です。
• 1日目の更新記事です。

CSSの疑似要素と疑似クラスとは

CSSで使うことができる擬似要素には、指定した要素の前につけることができるbeforeや今回みたいに後ろにつけるafterがあります。


また疑似クラスというのもあって、これはulの内、一番最初のliだけなど最初の要素に指定できるfirst-childやn番目の行だけにしているできるnth-chile(n)などこちらも便利な要素。

上の例でも使いましたが、疑似要素と疑似クラスを組み合わせて使うこともできます。

疑似要素と疑似クラスの違いは、疑似要素は特定の文字などに対してCSSを指定できて、疑似クラスは特定の条件になった要素に対して指定できるといったものです。

またcontentプロパティとは文字の情報を追加することができるプロパティで先ほどだとNEWをつけて、そこにcolorで文字色を指定してみました。

疑似要素、疑似クラスは制作を簡単にするだけでなく、後々の更新も手軽にすることができるので覚えておいて、しかも実践しておいて損はありません。


CSSにしてもHTMLにしても手間をかければ上の手順も表現することができますが、やはり簡単に出来る方法があればそちらを利用したいところ。


また応用も効くので、CSSの勉強を改めてしてみるのも新しい発見につながるのでお勧めです。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。