ヴォルフロッシュ

Blog

Published on

RSS

figcaptionのスタイリング

figcaptionが上にある場合はキャプションに▼が、figcaptionが下にある場合はキャプションに▲が自動的に付く
使用例

ふと思いついたのだが、figurefigcaptionの使い方で、順序でセレクタを分ければうまいことCSSで矢印が付けられるのでは。

こんな風に。

CSS
figure figcaption:first-child:before { content:'▼' }
figure * + figcaption:before         { content:'▲' }

つまり、figureの直後にfigcaptionが出てきたらその下に本体があるので▼、直後じゃなかったらその前に(つまり*のところに)本体があると判断して▲。今日日このくらいならどのブラウザでも表示できるはず。便宜上書くのに楽なので▲にしたがもちろん画像でも何でも良い。contentが嫌いなら、background + 画像 で。

うん、これは理にかなってていいな。気が向いたら採用しよう。

Comment

この記事へのコメント受付は終了しました。