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

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

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

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

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

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

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

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

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

動作サンプル

https://codepen.io/darucub/pen/KwzKMoj

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

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。