「新しいウィンドウを開く」のアイコンを、自動でつけるCSSはありますか？

yukokimura2

「リンクをクリックすると、新規ウィンドウを開く」時がありますよね。
その際、自動であのアイコンをつけるCSSはありますか...？

こちらのページを参考にして、
https://allabout.co.jp/gm/gc/23996/

「<style type="text/css">
a[target="_blank"]:after {
content: url(画像のファイル名);
margin: 0px 2px;
}
</style>」

を追加CSSに入れてみたり、
<style>がエラーになっている？ようだったので、

「a[target="_blank"]:after {
content: url(画像のファイル名);
margin: 0px 2px;
}」

を入れてみたりしたのですが、表示されず...＞＜

どなたかご存知の方がいらっしゃいましたら、是非お知恵をお借りできましたら幸いです。
どうぞ宜しくお願い致します。

マニュアル確認済み
キャッシュクリア済み
プラグイン全停止済み
WordPressのバージョン : 5.2.2
ご利用のサーバー名 : さくらサーバー
PHPのバージョン : 7.3.7
OS : Mac 10.13.6
ご利用のブラウザ : Chrome バージョン: 76.0.3809.100
該当サイトのURL : https://startup-kitchen.com

Ryota

@yukokimura2 さん

こんにちは！JIN運営チームのりょうたです。
参考にしているサイトですが、JINの構造と違うのでそのコードを入れるだけでは少し難しかと思います。

もう少し情報が必要ですので、どのページのどの部分に追加したいのかURLでご共有いただけますでしょうか？
教えていただければおそらく数行で終わるかと思いますので、何卒宜しくお願い致します。

yukokimura2

ryotaさん
ありがとうございます！

「どのページのどの部分に追加したいのか」とのことですが、全てのページの、新規ウィンドウ作成のリンクの横？に、よく見るあのアイコンをつけたいと考えています。
いかがでしょうか？m(_ _)m

Ryota

@yukokimura2 さん

こんにちは！
ご連絡ありがとうございます。

認識のズレがあっては時間の無駄ですので、確認したいのですが、
「新規ウィンドウ作成のリンク」とは「別ダブで開くテキストリンク」という認識なので合っていますでしょうか？

もし上記の認識で正しければ、そのリンクを作成するボタンのHTML要素とCSSが必要になってきます。
お手数お掛け致しますが、ご教示いただけますと幸いでございます。

yukokimura2

@ryota さん

ありがとうございます！

仰せの通り「別タブで開くテキストリンク」です。

別タブで開く場合、<a href="URL" target="blank">テキスト</a>というやり方は認識しているのですが、その延長になるのでしょうか？m( _)m

どうぞ宜しくお願い致します。

Ryota

@yukokimura2 さん

こんにちは！りょうたです。
ご連絡が遅くなり申し訳ございません。

ご教示いただきありがとうございます。

別タブで開く場合、<a href="URL" target="blank">テキスト</a>というやり方は認識しているのですが、その延長になるのでしょうか？

別タブで開くことだけを考えた場合、@yukokimura2 さんの仰る通りでございます。

以下簡単にHTMLとCSSを書いてみました。

【HTML】
<div class="new_browser">
	<a href="#" target="_blank" class="tab_link">
		ここに任意のテキストを入力
	</a>
</div>

【CSS】
.new_browser a.tab_link{
	position: relative;
}
.new_browser a.tab_link::after{
	position: absolute;
	content:'';
	top: 0;
	right: 0;
	width: 25px;
	height: 25px;
	background-image: url(https://tech-first.mixh.jp/new/wp-content/uploads/2019/09/125_arr_hoso.png);
	background-repeat: no-repeat;
	background-size: 25px 25px;
}

一応記事内では確認していますが、
そのほかのサイドバーやウィジェットエリア内では確認していませんので何かあれば仰ってください。

また、画像パスは僕のサイトから画像を引っ張ってきていますので
違うアイコンを使いたい場合は、@yukokimura2 さん自身で画像をダウンロードしてアップロードして使ってください。

//使ったアイコン
https://iconbox.fun/新規ウィンドウ矢印のアイコン-2/

上記お手数ではございますが、ご確認の程宜しくお願い致します。

yukokimura2

@ryota さん

おおおありがとうございます！
トライしてみます！