CSS 가상 요소(pseudo-elements) ::after ::before
2022. 7. 11. 00:57ㆍFRONTEND/CSS
Pseudo-elements
(가상 요소)
| ::after | ::first-letter | ::placeholder |
| ::before | ::first-line | ::selection |
| ::backdrop | ::grammar-error | ::slotted() |
| ::cue | ::marker | ::spelling-error |
| ::cue-region | ::part() |
1. ::after
선택한 요소의 맨 마지막 자식으로 요소 하나를 생성합니다.
기본 값은 inline 입니다.
<html>
<head>
<style>
#wrap {
font-size: 4rem;
}
#wrap::after {
content: 'hello';
color : blue;
font-size: 4rem;
}
</style>
</head>
<body>
<div id="wrap">
hi
</div>
</body>
</html>결과 ↓
2. ::before
선택한 요소의 맨 앞 자식으로 요소 하나를 생성합니다.
기본 값은 inline 입니다.
<html>
<head>
<style>
#wrap {
font-size: 4rem;
}
#wrap::before {
content: 'hello';
color : blue;
font-size: 4rem;
}
</style>
</head>
<body>
<div id="wrap">
hi
</div>
</body>
</html>결과 ↓
'FRONTEND > CSS' 카테고리의 다른 글
| 구글 폰트 적용하기 (Google Fonts) (0) | 2022.07.11 |
|---|