「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。レスポンシブでリンクをimgとテキストで切り替える基本の使い方これは色々なサイトで紹介されていますが、基本の使い方です。aタグのhref属性をattrで取得し、リンク先URLを表示してみます。attrで取得する内容をtitleやdata-xxxにすれば、わざわざjsを使用しなくても様々な表現が可能になります。title属性をimgのキャプションとして使用するでは、imgのalt属性を取得して、キャプションとして表示したりできたら便利じゃないかと思いついたりするのですが、実はこの用法は落とし穴があります。:afterと:beforeの疑似要素は、imgやinputなどの置換要素(閉じタグが無く、そのタグひとつで完結してしまう要素)には適用できません。閉じタグが存在しないのにafterもbeforeもないじゃないかということのようです。imgのキャプションを表示したい場合は、spanやpタグを親タグとして囲い、その親タグに属性を付与し、親タグの属性を取得するというひと手間が必要となります。キャプション文字列の挿入場所を親タグに、という条件さえクリアできれば、動的に吐き出した内容を表示できたりするので、画像投稿機能のついたサービスなんかでも応用できますね。投稿日時を表示わざわざタグを分けなくていいのでコーディングが若干楽、程度ですが。記述がスッキリするので好きです。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)の文字表示にしたりするだけ。alt=""></a></p>data属性に文字列を挿入すればなんでもできるので、幅広く応用がきくと思います。jQuery】実際にちょっと書いてみればきっと怖くない。コーディング・jQueryなど幅広く担当しています。(エイトビット)東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。制作に関するご相談はお気軽にどうぞコンペ参加や相談ベースでもご相談承っております。40種類CSSでスクロールバーの装飾をしよう!参考にしたいCSSでできるテーブルデザイン10選3ヶ月で9Kg痩せたので報告させていただきます。