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