- 2020.07.07
- WEB制作
【CSSコピペだけ】外部リンクの横につけるアイコンを簡単設置

外部リンクの横につけるアイコンですが、贔屓(ひいき)にしているWEBフォントだと少しダサイのでCSSで表現することにしました。
1.こんな感じのシンプルなアイコン

.exLink{
position: relative;
}
.exLink::before{
content: "";
position: absolute;
top: 2px;
right: -20px;
display: block;
width: 10px;
height: 8px;
border: 1px solid #999;
}
.exLink::after{
content: "";
position: absolute;
top: 6px;
right: -24px;
display: block;
width: 10px;
height: 8px;
border: 1px solid #999;
}
あとは、aタグにクラス指定してあげれば完了。
<li><a href="" class="exLink">企業情報</a></li>
2.ちょっとだけ工夫してみた

.exLink{
position: relative;
}
.exLink::before{
content: "";
position: absolute;
top: 3px;
right: -20px;
display: block;
width: 8px;
height: 6px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}
.exLink::after{
content: "";
position: absolute;
top: 6px;
right: -25px;
display: block;
width: 10px;
height: 8px;
border: 1px solid #999;
}
同じように、aタグにクラス指定してあげれば完了。
<li><a href="" class="exLink">企業情報</a></li>