가상 요소
1. 가상 요소
- 내용의 일부만 선택해 스타일을 적용할 때 사용함
- 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙임
2. ::first-line 요소와 ::first-letter 요소
- ::first-line 요소 : 첫 번째 줄에 스타일 적용
- ::first-letter 요소 : 첫 번째 글자에 스타일 적용
※ br 태그로 글을 나눌 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<p>
<!--별 헤는 밤 내용 中-->
<!--첫 번째 글자와 첫 번째 줄에 스타일이 적용됨-->
걱정도 별을 둘 나는 계십니다. <br>
<!--두 번째 줄에는 스타일이 적용되지 않음-->
나는 무덤 새워 이런 버리었습니다. <br>
</p>
</body>
</html>
p::first-line {
background-color: lightseagreen;
}
p::first-letter {
background-color: lightcoral;
}
3. ::before 요소와 ::after 요소
- 내용의 앞뒤에 콘텐츠 추가하기
- ::before : 특정 요소의 내용 앞에 지정한 내용을 추가함
- ::after : 특정 요소의 내용 뒤에 지정한 내용을 추가함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<ul>
<li>유재석</li>
<li>강호동</li>
<li>신동엽</li>
</ul>
</body>
</html>
ul > li::before {
content: "연예인 ";
background-color: lightgreen;
}
ul > li::after {
content: "님";
background-color: lightpink;
}
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| float 속성 정리 (0) | 2022.10.21 |
|---|---|
| 트랜지션 (Transition) 속성 정리 (0) | 2022.10.20 |
| 테이블 관련 태그 정리 (0) | 2022.10.12 |
| 주요 선택자 (0) | 2022.10.10 |
| 주석처리 (0) | 2022.10.06 |