CSS 의사 요소
CSS 의사 요소는 선택기에 특수 효과를 추가하는 데 사용됩니다.
구문
의사 요소 구문:
selector:pseudo-element {property:value;}
CSS 클래스도 의사 요소를 사용할 수 있습니다.
selector.class:pseudo-element {property:value;}
:첫 번째 줄 의사 요소
"첫 번째 줄" 의사 요소는 추가하는 데 사용됩니다. 텍스트의 첫 번째 줄까지 특별한 스타일을 설정하세요.
참고: "첫 번째 줄" 의사 요소는 블록 수준 요소에만 사용할 수 있습니다.
참고: "첫 번째 줄" 의사 요소에는 다음 속성을 적용할 수 있습니다.
글꼴 속성
색상 속성
배경 속성
단어 간격
문자 간격
텍스트 장식
세로 정렬
텍스트 변환
line-height
clear
:first-letter 의사 요소
"first-letter" 의사 요소는 특수 스타일을 설정하는 데 사용됩니다. 텍스트의 첫 글자
참고: "첫 글자" 의사 요소는 블록 수준 요소에만 사용할 수 있습니다.
참고: "첫 글자" 의사 요소에는 다음 속성을 적용할 수 있습니다.
글꼴 속성
색상 속성
배경 속성
여백 속성
패딩 속성
테두리 속성
text-design
vertical-align("float"가 "none인 경우에만 해당) ")
텍스트 변환
줄 높이
float
clear
의사 요소 및 CSS 클래스
의사 요소는 CSS 클래스와 결합될 수 있습니다.
p.article:first-letter {color:#ff0000;}
< ;p class="article ">기사의 단락</p>
위의 예에서는 클래스 기사가 있는 모든 단락의 첫 글자가 빨간색으로 변합니다.
여러 의사 요소
는 여러 의사 요소와 조합하여 사용할 수 있습니다.
아래 예에서는 단락의 첫 글자가 빨간색으로 표시되고 글꼴 크기는 xx-large입니다. 첫 번째 줄의 나머지 텍스트는 파란색이며 작은 대문자로 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>CSS - :before 의사 요소
":before" 의사 요소는 요소의 콘텐츠 앞에 새 콘텐츠를 삽입할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::before 伪元素示例</title>
<style type="text/css" media="all">
div::before
{
background: lightgreen;
content: "张三";
}
</style>
</head>
<body>
<div>今天来学习知识</div>
</body>
</html>CSS - :after 의사 요소
":after" 의사 요소는 요소의 콘텐츠 뒤에 새 콘텐츠를 삽입할 수 있습니다.
아아아아
다음 섹션