別ウィンドウで開く設定のリンクテキストの後ろに「矢印」アイコンを表示させて、WordPress内の記事をリッチにする時のお作法

その「矢印」アイコンはこちら。

• external-link-alt - Font Awesome

スタイルシート

style.css

// 「矢印」アイコン
.content a[target="_blank"]:after {
    margin: 0 3px;
    font-family: FontAwesome;
    vertical-align: middle;
    content: '\f08e';
    display: inline-block;
    text-decoration: none;
}

// 記事内の画像リンク
.content a[href$=".png"]:after, .content a[href$=".jpg"]:after, .content a[href$=".jpeg"]:after {
  margin: auto;
  content: '';
}

// カエレバの商品リンク
.content .kaerebalink-box a[target="_blank"]:after {
  margin: auto;
  content: '';
}

記事内の画像リンクと、WordPressにはお馴染みの「カエレバ」の商品リンクへのスタイルの適用を無効にしています。記事内の画像リンクは画像の種類（拡張子）に応じて増やしてください。

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors