HTML コーディング代行会社のブログ

外部リンクのアイコンを自動表示する設定について2019.07.07

「今日は七夕、年に一度、織姫 (おりひめ) と彦星 (ひこぼし) が "リンク" する日ですね！」 と、タイトルと無理矢理リンクさせてみました (笑)。。というわけで、最近ではコーディング現場に限らず、オウンドメディアや個人のブログでも 外部リンク が判りやすい親切なサイトが増えました。当サイトでも (あまり外部リンクはありませんが) 上記のようなアイコンを使用しており、今回はその設定方法をシェアしたいと思います。

HTML

<a href="https://jetcoding.biz/" target="_blank">コーディング代行・外注のジェット・コーディング</a>

CSS

target="_blank" を設定している場合にアイコンを表示する方法。

a[target="_blank"] {

  padding-right: 16px;
  background: url(../img/icon_blank_black.svg) no-repeat right center / contain;

}

"http" から始まるリンクの場合にアイコンを表示する方法。

a[href^="http"] {

  padding-right: 16px;
  background: url(../img/icon_blank_black.svg) no-repeat right 1px center / contain;

}

コーディング部ログ TOP