반응형
● 의사 요소 선택자(pseudo-element)
★ 요소의 지정된 부분을 스타일 설정하기 위한 선택자.
※ 종류
☆ ::first-line - 요소의 첫줄에 스타일을 설정
☆ ::first-letter - 요소의 첫 글자에 스타일을 설정
☆ ::before - 요소의 앞에 어떤 내용을 삽입하기 위한 선택자.
☆ ::after - 요소의 뒤에 어떤 내용을 삽입하기 위한 선택자.
★ pesudo_element_selector.html ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p::first-line {
color:blue;
background-color: yellow;
}
h2::first-letter, p::first-letter {
color: red;
}
p::first-letter {
font-size: 20px;
}
h2::before {
content: "";
background-image: url("jo.jpg");
background-size: 300px 200px;
width: 300px;
height: 200px;
display: inline-block;
}
p::after {
content: "";
background-image: url("jo.jpg");
background-size: 300px 200px;
width: 300px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<p><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse eu tincidunt lectus.
Duis augue quam, tincidunt vel ante faucibus, vestibulum facilisis lacus.<br></p>
</body>
</html>반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 배경 (0) | 2023.07.06 |
|---|---|
| [CSS] 색상표현 (0) | 2023.07.06 |
| CSS 가상 선택자3(:disabled, :checked) (0) | 2023.05.16 |
| CSS 가상 선택자2(:first-child, :last-child, :nth-child(2n+1)) (0) | 2023.05.16 |
| CSS 가상 선택자1(:link, :visited, :hover, :active, :focus) (0) | 2023.05.16 |
