【CSS】疑似セレクタ・疑似要素の活用

疑似セレクタ・疑似要素とは

擬似クラスを利用すると、マウスホバー状態時など、HTMLのみでは表現できない状態のスタイルを設定できます。
擬似要素はHTML上に直接指定できない要素にスタイルをあてたり、存在しない追加のコンテンツを挿入したりできます。

サンプルのNEWSは、マウスオーバーやドラッグで選択した時のスタイル設定、
2つめ以降の要素にのみマージンを設定したり、CSSだけでNEWの表記を追加しています。

DEMO