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

・疑似要素とは?

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 {
}
おすすめ記事


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

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

( ´ー`)~♪
1

おさかな

学習メモ

「プログラミング」で学んだことのメモ書きになります。「コード」をたくさん載せていくので、ぜひ参考にしてみてください!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。