Home > CSS > [ CSS ] 指定した要素の後に属性値を表示する :after と content と attr() のサンプル

[ CSS ] 指定した要素の後に属性値を表示する :after と content と attr() のサンプル

WordPress のテーマを眺めていると、初めて見る CSS の書き方があったのでメモ。

サンプル

↑ こんな感じに表示されているんだが、HTML のテキスト部分には [ 2.5.1 ] と言う文字は書かれていないんですよね。

気になった HTML と CSS 部分のソースコードは以下のようなコードです。

HTML のソースコード ( 抜粋 )

<a href="#" title="2.5.1">WordPress</a>

a[title]:after {
    content: " "attr(title);
}

どうやら、title 属性を持つ a 要素の後に title 属性の値を表示する物らしい。 CSS って奥が深いんですね。

ちなみに Internet Explorer 7, Internet Explorer 6 では表示されませんでした。

Trackback URL for this entry: http://bowz.info/1688/trackback
Listed below are links to weblogs that reference: [ CSS ] 指定した要素の後に属性値を表示する :after と content と attr() のサンプル from Bowz::Notebook

pingback from links for 2008-09-29 « tscpannex 08-09-30 (火) 9:32: [...] [ CSS ] 指定した要素の後に属性値を表示する :after と content と attr() のサンプル | Bowz::Notebook ふーん。参考になる。 (tags: CSS) « links for 2008-09-27 [...]

Home > CSS > [ CSS ] 指定した要素の後に属性値を表示する :after と content と attr() のサンプル

Search

Recent Entries

Pages

Categories