【CSS】「疑似要素」をつかって文頭に「〇」を付けてみる！【学習メモ】

2019年7月2日 13:27

・疑似要素とは？

CSS の疑似要素 Pseudo-elements はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば ::first-line 疑似要素は、段落の最初の行のフォントを変更するために使用することができます。(MDN)

今回は「疑似要素」を「〇」として、コーディングしていきます！

・ソースコード

※<style>タグの中身が「css」で記述する部分です。

<!DOCTYPE html>
<html>
	<head>
		<title>CSS</title>
		<style type="text/css">
			header li {
			    display: inline-block;
			    margin: 10px;
			    }
			header .start::before {
			    display: inline-block;
			    margin: 0 3px 0 8px;
			    width: 10px;
			    height: 10px;
			    content: '';
			    border-radius: 100%;
			    background:#c0c0c0;
			    }
			 header .end::after {
			    display: inline-block;
			    margin: 0 3px 0 8px;
			    width: 10px;
			    height: 10px;
			    content: '';
			    border-radius: 100%;
			    background:#c0c0c0;
			    }
		</style>
	</head>
	<body>
		<header>
			<ul>
				<li class="start">前に表示</li>
				<li class="end">後ろに表示</li>
			</ul>
		</header>
	</body>
</html>

こちらが「疑似要素」のポイント部分になります。

::before
//前につけたい場合

::after
//後ろにつけたい場合

これらを「セレクタ」につけて記述します。

この部分がセレクタ {
    プロパティ名:値;
　　　}

実際に「セレクタ」につけるとこんな感じ。

header .start::before {
}

header .end::after {
}

おすすめ記事

「この記事おもしろい！」「おさかなは海に帰れ！」「泳げないおさかな…なんて…！」と、思ったそこのあなた！！！！ぜひ！サポートよろしくお願いします🙇 様々なジャンルの本を読むために活用させていただきます✨ 「え、読書する新種のおさかなだ！」と思ったあなたも！今すぐタッチ！