CSSの、 :after 疑似要素で同時に使用される content プロパティ。
「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。
基本の使い方
これは色々なサイトで紹介されていますが、基本の使い方です。aタグのhref属性をattrで取得し、リンク先URLを表示してみます。
HTML
|
1 |
<p id="demoLink"><a href="https://www.google.co.jp/">リンク</a></p> |
CSS
|
1 2 3 |
#demoLink a:after{ content:"[ "attr(href)" ]"; } |
表示結果
・CSS適用前： リンク
・CSS適用後： リンク[ https://www.google.co.jp/ ]
とても便利ですね。attrで取得する内容をtitleやdata-xxxにすれば、わざわざjsを使用しなくても様々な表現が可能になります。
title属性をimgのキャプションとして使用する
では、imgのalt属性を取得して、キャプションとして表示したりできたら便利じゃないかと思いついたりするのですが、実はこの用法は落とし穴があります。:afterと:beforeの疑似要素は、imgやinputなどの置換要素（閉じタグが無く、そのタグひとつで完結してしまう要素）には適用できません。閉じタグが存在しないのにafterもbeforeもないじゃないかということのようです。ですので、imgのキャプションを表示したい場合は、spanやpタグを親タグとして囲い、その親タグに属性を付与し、親タグの属性を取得するというひと手間が必要となります。
HTML
|
1 |
<p id="demoCaption" title="施工写真"><img src="02.jpg" alt="">ここは取得できません</p> |
CSS(contentにはcolorやdisplayなどのプロパティも併せて記述できます)
|
1 2 3 4 5 6 7 8 |
#demoCaption:after{ content:attr(title); display:block; color:#777; width:300px; text-align:center; margin-top:5px; } |
表示結果
施工写真
キャプション文字列の挿入場所を親タグに、という条件さえクリアできれば、動的に吐き出した内容を表示できたりするので、画像投稿機能のついたサービスなんかでも応用できますね。
投稿日時を表示
わざわざタグを分けなくていいのでコーディングが若干楽、程度ですが。記述がスッキリするので好きです。HTML
|
1 2 3 4 5 |
<ul id="demoDate"> <li data-post-date="2016-06-08">ニュースの投稿日時を表示</li> <li data-post-date="2016-06-07">ニュースの投稿日時を表示</li> <li data-post-date="2016-06-06">ニュースの投稿日時を表示</li> </ul> |
CSS
|
1 2 3 4 5 |
#demoDate li:before{ content:attr(data-post-date); color:#666; margin-right:1em; } |
表示結果
2016-06-08ニュースの投稿日時を表示
2016-06-07ニュースの投稿日時を表示
2016-06-06ニュースの投稿日時を表示
レスポンシブでリンクをimgとテキストで切り替える
こちらもスマホの際はimgを非表示にして、CSSでaタグのtitleの文字列を表示してしまえばHTMLがちょっとスッキリします。CSSで横幅で表示を切り替えimg表示にしたりattr(title)の文字表示にしたりするだけ。
HTML
|
1 |
<p id="demoResp"><a href="https://8bit.co.jp/" title="会社概要"><img src="btn.jpg" alt=""></a></p> |
data属性に文字列を挿入すればなんでもできるので、幅広く応用がきくと思います。
