No.228

ソースには記述がないのになぜか追加されるアレ

　特定のタグの前後に自動的に要素を追加してくれるのが「疑似要素（pseudo elements）」だ。

　記述的にはCSS＋テキストなので、CSSで出来ることは一通りできると思ってよい。
　リストメニューで見た目を統一するとか、要素を枠で囲ったりとか、テキストの先頭行の字下げを行うとか、工夫次第でいろいろできる。

　なによりHTMLのほうに余計なタグを記述する必要が無いのが嬉しい。自分はHTMLはシンプルであるに越したことはないという信者なので尚更だ。

サンプル

　例えば、以下のようにCSSを記述すると

<style type="text/css">
  a:before {
    content: "■";
    color: blue;
  }
  a:after {
    content: "＞";
    color: blue;
  }
</style>

　全てのリンクの先頭に青字で「■」後方に青字で「＞」が追加される。

<a href="#">テキスト</a>

　なら

■テキスト＞

　と表示されるのだ。使いどころによってはかなり便利。