【CSS】擬似要素 ::before でボタンの前にNEW!の文字を表示する方法

本日も実際のクライアントワークからのご紹介です。

それはとあるボタンの先頭に “NEW!” の文字をつけたいというご依頼。
画像を作って配置したり、fontawesomeのようなサービスを使ったり方法は色々ありますが、
今回はCSSのみで表示する方法をご紹介します。
使用するのは擬似要素の
::before
です。

HTML

<a href="">ボタン</a>

CSS

a::before {
content: "NEW!";
}

表示結果

ボタン

たったこれだけです。

解説

擬似要素はベースとなる要素を装飾するためのスタイルです。
今回の例では a という要素に before という擬似要素を付加しました。なので、a::beforeとなっています。
beforeは文字の通り、要素の前にスタイルを付加するもので、::after を使用すると、要素の後ろ側に表示されます。
次の例では、beforeをabsoluteで配置するのでbeforeでもafterでも結果は同じになります。

それでは少し装飾してみましょう。

ボタン “.btn-2”

ボタン “.btn-3”

.btns a::before {
	content: "NEW!"
}
.btn-2 a,
.btn-3 a { 
	padding: 10px 20px 10px 12px;
	border-radius: 8px;
	background: #afd4d2
}
.btn-2 a::before {
	background: #000;
	font-size: 11px;
	color: #fff;
	border-radius: 5px;
	padding: 3px 5px;
	margin-right: 10px
}
.btn-3 a { 
	position: relative;
	display: inline-block;
	text-align: center;
	margin-left: 10px;
	padding-left: 40px
}
.btn-3 a::before { 
	position: absolute;
	top: -10px;
	left: -10px;
	color: #fff;
	background: #bd0000;
	font-size: 10px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center
}

擬似要素を使えば簡単に装飾できるので、色々試してみましょう。

© GOKAN DESIGN STUDIO