考え方
・外部サイトへのリンクかどうかを属性セレクターで判別することが可能。
・これを使い、外部サイトへのリンクを持つaタグだけに、特定のスタイルを適用する。といったことを実現できる。
・また、合わせて疑似クラスや疑似要素を使うことで、文字やアイコンの要素を挿入することも可能である。
・以下に例を示す。
使い方
a{
color:royalblue;
}
a:visited {
color:red;
}
.content a:not([href*="kiminoquest.com"]){
font-size:70%;
color: gray; /* cadetblue; */
}
.content a[href*="kiminoquest.com"]{
display: block;
width: fit-content;
margin:10px;
padding:20px;
border: 1px solid #ccc;
}
.content a:not([href*="kiminoquest.com"]):before{
margin: 0 1em 0 0;
content: '[外部サイト]';
/* font-family: "Font Awesome 5 Free"; */
/* content: '\f35d'; */
/* font-weight: 900; */
}
参考
https://www.rectus.co.jp/archives/329
http://www.htmq.com/selector/not.shtml