擬似要素 (pseudo element) の取得

　IE 8 から、擬似要素がサポートされて、現在すべてのブラウザーがサポートされるようになりました。:before や, :after を使えば、DOM Tree は時に綺麗になることがあります。例えば、アイコンをある要素の前に挿入した場合、通常 <i> 要素を入れるか、background-image を使って、padding を追加する方法がありますが、擬似要素の :before の content に url(xxxx) を入れると、background-image と同じ効果になります。そうすると、余計なことをしなくて、単純にそのアイコンを操作することができます。
　昨日、サイトに :before 要素を javascript で取得して、操作しようとのケースがありました。擬似要素をどのように javascript で取得するかを調べてみました。メモしておきます。
    window.getComputedStyle(element, ':before')
　content attribute を取得する場合、上記で取得したスタイルの後ろに .content を追加すれば、取得できます。
　また擬似要素の content に複数文字列を表示したい場合、単純に
　 el:before {
        content: "Num" counter(item) "."
    }
　のようにリストすればいいです。

　CSS にこのような擬似要素を使えば、いろんな面白い効果ができます。例えば：
　CSS icons
　また、今流行っている font graphic を使えば、例えば、
　Font Awesome
　このように、フォントを使えば、font-size を使えば、大きさも調整できるし、Retina の hi-res のスクリーンも難なく対応できます。SVG より、こっちのほうが使い易いと思います。
　それでは。