【CSS】擬似要素、beforeとafterに画像を表示しサイズの調整

シュウ

今回は【CSS】擬似要素、beforeとafterに画像を表示しサイズの調整ついて!
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
beforeとafterの使い方について学びたい方へ
今回はbeforeとafterに画像を指定しサイズ調整について解説しております。

[記事の内容]

beforeとafterについて

CSSの擬似要素beforeとafterは、指定した要素の前に（before）または要素の後に（after）擬似的な要素を追加することができます。

beforeとafter

<div class="btn"><a href="#">詳細を見る</a></div>

.btn {
	width: 300px;
	position: relative;
}
.btn::before {
 
}
.btn::after {
 
}

上記のコードのは、要素にposition: relativeを指定しています。
「relative」は必須なので指定を忘れないようにしましょう。

::beforeの設置方法について

::beforeの「●」の指定方法について解説していきます。
擬似要素のbeforeとafterは画像以外にも文字の表示も可能になります。

beforeの設置方法

詳細を見る

<div class="btn"><a href="#">詳細を見る</a></div>

.btn {
	width: 300px;
	position: relative;
}
.btn a {
	font-size: 16px;
	border-radius: 30px;
	display: block;
	padding: 15px 0;
	text-align: center;
	color: #fff;
	background: #e4505b;
	border: 2px solid #e4505b;
	text-decoration: none;
}
.btn a:hover {
	color: #e4505b;
	background: #fff;
	border: 2px solid #e4505b;
	text-decoration: none;
}
.btn a::before {
	content: "●";
	color: #fff;
	position: absolute;
	top: 30%;
	left: 10%;
}
.btn a:hover::before {
	color: #e4505b;
}

上記のコードでは、::beforeのみ指定しています。
「before」には、「absolute」は必須なので指定を忘れないようにしましょう。
また、「hover」を指定する際には、:hover::before繋げて指定するようにしましょう。

::afterの設置方法について

::afterの「矢印」の指定方法について解説していきます。
今回は「content」を使用せずに、background: url("")を使用します。

ポイント！
backgroundで指定した方が、サイズの調整、位置の調整が簡単に指定ができます。
また、contentでは、「width」や「height」でサイズ調整はできません。

afterの設置方法

詳細を見る

<div class="btn"><a href="#">詳細を見る</a></div>

.btn {
	width: 300px;
	position: relative;
}
.btn a {
	font-size: 16px;
	border-radius: 30px;
	display: block;
	padding: 15px 0;
	text-align: center;
	color: #fff;
	background: #e4505b;
	border: 2px solid #e4505b;
	text-decoration: none;
}
.btn a:hover {
	color: #e4505b;
	background: #fff;
	border: 2px solid #e4505b;
	text-decoration: none;
}
.btn a::before {
	content: "●";
	color: #fff;
	position: absolute;
	top: 30%;
	left: 10%;
}
.btn a:hover::before {
	color: #e4505b;
}
.btn a::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 38%;
	right: 10%;
	background: url(arrow-off.png) no-repeat;
	background-size: contain;
	width: 15px;
	height: 15px;
}
.btn a:hover::after {
	background: url(arrow-on.png) no-repeat;
	background-size: contain;
}

上記のコードでは、::afterには、「background」で画像を指定したので、
contentは指定しませんが、必ず「content: “”」の中身は空でも問題はないので指定しておきましょう。

アニメーションの設置方法について

::afterの「矢印」にアニメーションを指定します。
hoverをすると矢印が右に動くアニメーションを設置します。

アニメーションの設置方法

詳細を見る

<div class="btn"><a href="#">詳細を見る</a></div>

.btn {
	width: 300px;
	position: relative;
}
.btn a {
	font-size: 16px;
	border-radius: 30px;
	display: block;
	padding: 15px 0;
	text-align: center;
	color: #fff;
	background: #e4505b;
	border: 2px solid #e4505b;
	text-decoration: none;
}
.btn a:hover {
	color: #e4505b;
	background: #fff;
	border: 2px solid #e4505b;
	text-decoration: none;
}
.btn a::before {
	content: "●";
	color: #fff;
	position: absolute;
	top: 30%;
	left: 10%;
}
.btn a:hover::before {
	color: #e4505b;
}
.btn a::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 38%;
	right: 10%;
	background: url(arrow-off.png) no-repeat;
	background-size: contain;
	width: 15px;
	height: 15px;
	transition: all .3s;
}
.btn a:hover::after {
	background: url(arrow-on.png) no-repeat;
	background-size: contain;
	right: 8%;
}

上記のコードでは、transition: all .3sを指定し、
「hover」すると、「right: 10%からright: 8%」まで動くアニメーションになります。