css脱初心者？ :before :after擬似要素の使い方とか基本的なこと - Qiita<!-- イメージです --> <ul> <li> <span>(:before)</span> リストです <span>(:after)</span> </li> </ul> このようなhtmlがあるというイメージでcssを書くことが出来るため、デザインの幅がとても広がります。 あくまで「擬似要素」であるため、実際に上記のようなhtmlが出力されるわけではありません。 無駄なhtmlが出力されないので、htmlを汚さずにセマンティック？な感じでいけるのもメリットですね。ちなみに:before,:after要素はインライン要素です。
