• 2020.07.07
  • WEB制作

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

【CSSコピペだけ】外部リンクの横につけるアイコンを簡単設置のイメージ画像

外部リンクの横につけるアイコンですが、贔屓（ひいき）にしているWEBフォントだと少しダサイのでCSSで表現することにしました。

１．こんな感じのシンプルなアイコン

１．こんな感じのシンプルなアイコン

.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>

２．ちょっとだけ工夫してみた

２．ちょっとだけ工夫してみた

.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>