imgに疑似要素は設定できない？

Bloggerでは最初からlightboxの機能が備わっています。
アンカーで<a href="画像.png">画像</a>と設定すればポップアップ表示されると思ったのですがされませんでした。
それっぽく見せられないかと考えて、img要素の上に文字を表示したらいいのではないか？と思いました。
それで疑似要素を使ったらいいのでは？と（現状、そんなことしか考えられませんでした）。

img::beforeとしてcontentに文字を表示させましたが、旨く行きませんでした。
結論としては、使えないってことでした。

以降、すごく無理矢理しているのでこういう設定でこんなことができるという議事録的な内容になります。

考え直して、img要素をdivか何かで囲ってしまえばいいのではと。
下記のように設定しました。

<div class="wrapper">
<a href="画像.png"><img src="画像.png" alt="画像の説明"></a>
</div>

cssは下記のようにしました。

.wrapper::before{
    display: inline-block;
    content: '文字';
    position:absolute;
    color:tomato;font-weight:bold;
    opacity: 1;padding-left:5px;
}
.wrapper:hover::before{
    display:none;
}
.wrapper img{ opacity: 0.1;}
.wrapper{position: relative;width:3rem;display: inline-block;}

.wrapperのhoverを設定しているのは文字部分をクリックした際、理想通りの動きをしなかったため、hoverした際は非表示にして画像をクリックさせるということにしています。
opacity: 0.1;は画像を設定しているのを見やすくするためにしています。普通は0でいいかと思います。
本当に無理矢理ですね。

サンプル

ですが、表示している枚数がかさむと結局どうなんだと思ったのでこの方法はちょっと……とやっていて思いました。普通に外部ファイルでlightboxを指定してあげたほうがよさそうと思いました。

このサイトでは現在、別の方法で画像を表示しております。

関連記事