의사요소
의사요소
- 선택자에 추가하는 키워드
- 선택한 요소의 특정 부분에 대한 스타일 정의
- li 요소의 첫 번째 글자만 크기를 20px
-li::first-letter { font-size: 20px; }
| 의사요소 | 의미 |
|---|---|
| after | 요소의 앞에 의사요소를 생성 및 추가 |
| before | 요소의 뒤에 의사요소를 생성 및 추가 |
| first-line | 블록 레벨 요소의 첫 번째 선에 스타일을 적용 |
| marker | 목록 기호의 스타일을 적용 |
| placeholder | 입력 요소의 placeholder 스타일을 적용 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>의사 요소</title>
<style>
p::first-line {
color: salmon;
}
p::first-letter {
color: steelblue;
}
li::marker {
color: lightgreen;
font-size: 40px;
}
input::placeholder {
color: khaki;
font-size: 30px;
}
p::before {
content: "앞에 추가한 내용";
font-size: 30px;
}
p::after {
content: "뒤에 추가한 내용";
font-size: 50px;
color: white;
background-color: thistle;
}
</style>
</head>
<body>
<p>
first line first line first line first line first line
first line first line first line first line first line
first line first line first line first line first line
first line first line first line first line first line
first line first line first line first line first line
first line first line first line first line first line
</p>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<input type="text" placeholder="Enter....">
</body>
</html>
ISTJ의 재미없는 velog