선택자에 추가하는 키워드 선택한 요소의 지정된 부분에 스타일 적용

선택자::before

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.required::before {
			content: '*';
			color: red;
		}
	</style>
</head>
<body>
	<form action="">
		<label for="id" class="required">ID</label>
		<input type="text" name="id" id="id" required>
		<br>
		<label for="pw" class="required">PW</label>
		<input type="text" name="pw" id="pw" required>
		<br>
		<label for="email" class="">Email</label>
		<input type="text" name="email" id="email" required>
	</form>
</body>
</html>

Untitled

선택자::after

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.required::after {
			content: '*';
			color: red;
		}
	</style>
</head>
<body>
	<form action="">
		<label for="id" class="required">ID</label>
		<input type="text" name="id" id="id" required>
		<br>
		<label for="pw" class="required">PW</label>
		<input type="text" name="pw" id="pw" required>
		<br>
		<label for="email" class="">Email</label>
		<input type="text" name="email" id="email" required>
	</form>
</body>
</html>

Untitled

선택자::first-letter

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		p::first-letter {
			color: red;
		}
	</style>
</head>
<body>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit aliquid voluptates perspiciatis quibusdam, iure maiores eaque accusamus optio ipsa hic ducimus itaque, recusandae architecto pariatur ex blanditiis? Eveniet, tenetur iusto?</p>
</body>
</html>

Untitled

선택자::first-line

## 선택자::first-letter

- 특정 요소의 첫 글자를 선택

```html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		p::first-letter {
			color: red;
		}
	</style>
</head>
<body>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit aliquid voluptates perspiciatis quibusdam, iure maiores eaque accusamus optio ipsa hic ducimus itaque, recusandae architecto pariatur ex blanditiis? Eveniet, tenetur iusto?</p>
</body>
</html>

Untitled