【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する

CSSの、 :after 疑似要素で同時に使用される content プロパティ。 「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。

[hapilaki]

“:afterと:beforeの疑似要素は、imgやinputなどの置換要素（閉じタグが無く、そのタグひとつで完結してしまう要素）には適用できません。閉じタグが存在しないのにafterもbeforeもないじゃないかということのようです。”

[jdash]

「content:attr(xxxx);」のxxxx部分をtitileとかhrefにすると、その値を取得できるってCSS。マニアックだけどキャプションのHTMLを書かなくても良いのは便利かもしれんね。（別途コーディング必要）