【備忘メモ】外部リンクに任意のアイコンを表示する。

※このエントリーは管理者のメモ用です。

ページ制作時、別ドメインへのリンクテキストに対して、別窓遷移であることを明示するためのアイコンを表示する場合があるので、その設置方法をメモっておく。

target=”_blank”全部に設定する場合

ページ内にある<a>タグ全体を対象にしつつ、target=”_blank” がある全てのリンクに対する指定。

<a href="https://example.com/" target="_blank">リンクテキスト</a>
a[target="_blank"]::after{
    content: url(/img/icon_new-window.png);
    vertical-align: middle;
    margin-left: 5px;
}

※画像パス、名前は任意。実際の画像設置場所に変更して利用。

特定のリンクテキストに対して設定する場合

全部にアイコン付いちゃうと都合悪い、指定するリンクだけにアイコンを付けたい、という場合。

<span class="blank-link"><a href="https://example.com/" target="_blank">リンクテキスト</a></span>
.blank-link a:after {
    content: url(/img/icon_new-window.png);
    vertical-align: middle;
    margin-left: 5px;
}

※クラス名[ blank-link ] は任意。