target="_blank"を設定したらリンクテキストのあとにアイコンを表示する

先日リンクにファビコンを表示する記事が話題になっていたことからヒントを得た。
これはお役立ち！リンク先のfaviconをリンクアイコンとして表示させる方法！ | バンクーバーのWEB屋
このようにリンクテキストのあとに新しいタブで開くことをアイコンで表示することができる。

知っている人には何を今更って内容なのだろうけど今までずっと謎だったので解説記事書く。

<a href="http://wada811.blogspot.com/" target="_blank">DevAchieve</a>

.entry-content a[target]:after {
    margin: 0 2px;
    content: url(http://表示したい画像のURL);
}

.entry-content はBloggerの記事内部を表すクラス。記事の外のスタイルは変更したくなかったので。
a[target] はaタグを属性セレクタでtarget属性を持つもののみを指定。
:after は疑似要素。要素の後のスタイルを指定できる。
content で表示内容を指定。画像で表示したいのでBloggerでアップロードしてURLを指定した。

インスピレーションを得たFavicons Next To External Links | CSS-Tricksでは
a[href^="http"]:before で、 [href^="http"]で前方一致していた。
同様にして[target="_blank"]でできそうなんだけどスタイルが適用されなかった。
仕方ないので target の記述があるかどうかだけチェックしてます。
普通は target="_blank"を指定するときだけ target 属性を書くと思うので。

参考リンク

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
:after疑似要素 (E:after)｜セレクタ｜CSS HappyLife ZERO