【CSS3】アイコン画像を使わずにCSSのみで外部リンクアイコンを設置した方法メモ

最近はアイコンをCSS3で作り、画像を極力使わないようにしていたので、今回もbackground+urlを使わないで、作ってみることにしました。

pタグの中のaタグに対して、before・after擬似要素を使い、position:absolute + right/bottom を使って配置してみるました。

#contentleft .entry-body p a:link {
	background-color: rgba(229,107,33,0.1);

	position:relative;

	padding-right: 15px;
	}

#contentleft .entry-body p a:link:before {
	content: '';
	display:block;
	position:absolute;

	height:6px;
	width:10px;
	bottom:7px;
	right:0px;
	background:#E56B21;
	}

#contentleft .entry-body p a:link:after {
	content: '';
	display:block;
	position:absolute;

	height:5px;
	width:9px;
	bottom:5px;
	right:2px;
	border-left:1px #E56B21 solid;
	border-bottom:1px #E56B21 solid;
	}

しかし、aタグ（リンク）の文章が長くて改行されている場合は、rightとbottomの基準位置がよくわからないことになり、意図しない位置に配置されてしまいました。

↑画像では、下のリンクで、アイコンが変なところに表示されている。

問題は、before要素をright、bottomで上手くaタグの末尾に配置できなかったことなので、beforeを使わず、afterだけでどうにかすることにしました。

とりあえず、afterをinline要素にして四角は簡単に作れます。今回のアイコンは形状があまりに簡単なので、左下の部分をbox-shadow（CSS3）で書き、境目部分をborder-left・border-bottomで作ることにしました。

ただ、実際にやってみると配置が難しく、box-shadowで作られる影のサイズはborderも含んでしまうようだったので、隠すのに使ったborder-leftとborder-bottomの分まで、左下の箱が大きくなってしまい、変になります。そこで、box-shadowの4番目の引数に負を指定して、少し小さいサイズにしました。

#contentleft .entry-body p a:link {
	background-color: rgba(229,107,33,0.1);

	position:relative;

	padding-right: 5px;
	}

#contentleft .entry-body p a:link:after {
	content: '';
	display: inline-block;
	height: 6px;
	width: 10px;

	margin-bottom: 2px;
	margin-left: 3px;
	border-top: 0px #E56B21 solid;
	border-right: 0px #E56B21 solid;
	border-bottom: 1px #FDF0E9 solid;
	border-left: 1px #FDF0E9 solid;
	background-color: #E56B21;
	box-shadow: -2px 2px 0 -1px #E56B21;
	}

その結果、まぁまぁいい感じになりました（※背景がrgbaで透過してしまっていて、直接指定すると変なことになるので、rgba(229,107,33,0.1)を白背景での不透明化した色#FDF0E9に変更しています）。

↑下のリンクも、正しい位置に配置されている。

ここまでだと、外部リンクかどうか関係なく適用されてしまうので、内部リンクを無視するように記述を付け足しました（コンパクト重視）。

#contentleft .entry-body p a[href*="//did2memo.net/"]:link {
	padding-right: 0px;
	}
#contentleft .entry-body p a[href*="//did2memo.net/"]:link:after {
	content:none;
	}

URLは（いや、他色々も）、適宜読み替えてください。