擬似要素のafterが表示されません。

a[target="_blank"]::after でfontawesomeアイコンを表示したいです。

css
1a[target="_blank"]::after {
2    font-family: 'Font Awesome 5 Free';
3    content: '\f0a9';
4}

html
1<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
2<a href="#" target="_blank" class="note-contents">注釈</a>

[::before]なら表示されます。
[content: "テスト";]などでも試しました。
[:][::]も両方試しました。
a[target="_blank"]を諦めてクラスで指定したり、
[a]以外のタグでも試してみましたが[::after]のみ表示されません。

理由がわからず困っています。

見落としている箇所があるかもしれません。
リセットcssはHTML5 Reset Stylesheetを少しいじって使っています。

なにか手がかりになりそうなことをご存知の方がいらっしゃればご助言お願いします。

退会済みユーザー

2019/02/11 22:57

注釈の横に矢印のアイコンを表示したいと言うことですか？それでしたらできてる気がします。 https://codepen.io/yoshi0819/pen/jdxpdq サンプルです。

kohal

2019/02/12 06:42

ありがとうございます。表示できていますね…。こちらでももう一度試してみたところ表示されました。質問時はフォントが□になってしまうとかでなく、デベロッパーツールで確認してもafter要素そのものが出力（？）されていなかったのです。理由が全くわかりませんが表示されるようになりましたのでヨシといたします。お手数をおかけいたしました。

行動規範の内容に同意します

回答2件

font-weight: bold;
を追加するとどうでしょうか？
一部のアイコンには、 font-weight: bold; を指定しないと表示されないバグがあります。

投稿2019/02/11 22:52

編集2019/02/12 05:07

homea_w

総合スコア59

yoshinavi

2019/02/12 05:57

有効な方法だと思っていましたが、「マイナス評価」ってことは違うのですかね？

kohal

2019/02/12 06:47

ありがとうございます。 yoshi0819さまへの返信にも書きましたが質問時点では「after」のみ出ない状態でした。 font-weightも色々と変えたり呼び出しフォントも変えたりしてみたのですがダメでした。複数ブラウザで確認したのですが。今再度試したところ表示されるようになりました。理由が明確でないのにお手数をおかけして申し訳有りませんでした。

yoshinavi

2019/02/12 07:33

kohal 様環境にも寄るのかもですね。提示コードと、「yoshi0819」さんのcodepenだと、私の環境ではトウフ（文字化け）でした。普段、こういう時は「homea_w」さんの回答のように「font-weight: bold;」で対処してたので、てっきり有効な手段だと思い込んでいました。 (^^;)

kohal

2019/02/12 17:24

yoshinaviさま yoshi0819さんが投稿コードを再現してくださったcodepenはこちらでも豆腐です。今回の質問の趣旨はfontawesomeの問題というよりも、 [after]要素そのものがなぜか表示されないというものでした。曖昧な質問文で混乱させてしまってすみません。ご指摘の通りfontawesomeの表示に困ったら font-weightを疑うのが良いようですね。お騒がせいたしました。

行動規範の内容に同意します

自己解決

css
1a[target="_blank"]:after {
2  content: "\f0a9";
3  font-family: "Font Awesome 5 Free";
4  font-weight: 900;
5  font-size: 100%;
6  margin: 5px;
7}