CSS 의사 요소

CSS 의사 요소는 선택기에 몇 가지 특수 효과를 추가하는 데 사용됩니다.

구문

의사 요소 구문:

selector:pseudo-element {property:value;}

CSS 클래스는 의사 요소를 사용할 수도 있습니다:

selector.class:pseudo-element {property :value; ;}

: 첫 번째 줄 의사 요소

"첫 번째 줄" 의사 요소는 텍스트의 첫 번째 줄에 특별한 스타일을 설정하는 데 사용됩니다.

다음 예에서 브라우저는 "첫 번째 줄" 의사 요소의 스타일에 따라 p 요소의 첫 번째 텍스트 줄 형식을 지정합니다.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>可以使用:first-line伪元素为文本的第一行添加特殊效果。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
</p>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

참고: "첫 번째 줄" 의사 요소는 블록 수준 요소에만 사용할 수 있습니다.

참고: "첫 번째 줄" 의사 요소에 다음 속성을 적용할 수 있습니다.

글꼴 속성
색상 속성
배경 속성
단어 간격 속성
문자 간격 속성
텍스트 장식 속성
세로 정렬 속성
text-transform 속성
line-height 속성
clear 속성

:첫 글자 의사 요소

"첫 글자" 의사 요소는 텍스트의 첫 글자에 특수 스타일을 설정하는 데 사용됩니다:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式！</p>
</body>
</html>

예제 실행»

"실행"을 클릭합니다. 온라인 예제를 보려면 "예" 버튼을 누르세요

참고: "첫 글자" 의사 요소는 블록 수준 요소에만 사용할 수 있습니다.

참고: "첫 글자" 의사 요소에 다음 속성을 적용할 수 있습니다.

글꼴 속성
색상 속성
배경 속성
margin 속성
padding 속성
border 속성
text-장식 속성
vertical-align 속성("float: none"인 경우에만)
text-transform 속성
line-height 속성
float 속성
clear 속성

의사 요소 및 CSS 클래스

의사 요소는 CSS 클래스와 결합될 수 있습니다.

p.article:first-letter {color:#ff0000 ;}

< p class="article">기사 단락</p>

위의 예는 수업 기사가 있는 모든 단락의 첫 글자를 빨간색으로 바꿉니다.

다중 의사 요소

는 여러 의사 요소와 조합하여 사용할 수 있습니다.

아래 예에서는 단락의 첫 글자가 빨간색으로 표시되고 글꼴 크기는 xx-large가 됩니다. 첫 번째 줄의 나머지 텍스트는 파란색이며 작은 대문자로 표시됩니다.

단락의 나머지 텍스트는 기본 글꼴 크기와 색상으로 표시됩니다.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>

예제 실행»

온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요

CSS - :before pseudo

":before" pseudo-element 요소는 요소의 콘텐츠 앞에 새 콘텐츠를 삽입할 수 있습니다.

다음 예제에서는 각 <h1> 요소 앞에 이미지를 삽입합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

Run Instance»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요