こんにちは。
皆さんはHTMLで外部リンク（別タブ/別ウインドウ）アイコンを作成するときはどうしていますか？
※以下外部リンクで統一
何気に厄介なアイコンですが私のオススメの方法をご紹介いたします。
HTML
まずはベースとなるHTMLです。
リンクになりますので<a>タグを使用します。
<a href="#" target="_blank">のらりくらり雑記ブログ</a>こちらの`target=“_blank”`が外部リンクとして機能することとなります。
“#”は各自任意のリンクを指定してくださいね。
CSS
次にCSSですが、こちらになります。
a[target="_blank"] {
display: inline-block;
position: relative;
}
a[target="_blank"]::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -1em; // 位置調整したい場合はこちら
width: 1em;
height: 1em;
background-image: url("任意のアイコンimg");
background-size: contain;
background-repeat: no-repeat;
}ポイントは直接`target=”_blank”`に指定していることです。
これによって付いた時のみ適応されるため、一度使うことで使い回すことができますね。
説明しますと、外部リンクアイコンはbackgroundにて敷いています。
そしてアイコンの大きさは擬似要素の大きさを1em（親の文字サイズ）で指定することで
文字と同じサイズにすることができます。
文字の大きさベースにしていますので文字サイズが変わってもそれに合わせてアイコンサイズも変わります。
Imageファイルとして使用するのはpngかsvg 特にsvgをおすすめします。
透過もできて背景にかぶりませんし、文字サイズが変わってもぼやけることがありません。
メンテナンスもしやすいと思いますので是非ご活用いただければと思います。
