CSS-의사 요소
CSS 의사 요소는 일부 선택기에 특수 효과를 추가하는 데 사용됩니다. 이러한 효과를 사용하기 위해 JavaScript 또는 다른 스크립트를 사용할 필요가 없습니다. 의사 요소의 간단한 구문은 다음과 같습니다.
selector:pseudo-element {property: value}
CSS 클래스는 의사 요소와 함께 사용할 수도 있습니다.
selector.class:pseudo-element {property: value}
가장 일반적으로 사용되는 의사 요소는 다음과 같습니다.
Sr. 아니. | 가치 및 설명 |
---|---|
1 | :first-line 이 요소를 사용하여 선택기에서 텍스트의 첫 번째 줄에 특수 스타일을 추가합니다. |
2 | :first-letter 이 요소를 사용하여 선택기에서 텍스트의 첫 글자에 특별한 스타일을 추가합니다. |
삼 | :before 이 요소를 사용하여 요소 앞에 일부 콘텐츠를 삽입합니다. |
4 | :after 이 요소를 사용하여 요소 뒤에 일부 콘텐츠를 삽입합니다. |
: first-line 의사 요소
다음 예제에서는 : first-line 요소를 사용하여 문서의 첫 번째 요소 줄에 특수 효과를 추가 하는 방법을 보여줍니다 .
<html>
<head>
<style type = "text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }
</style>
</head>
<body>
<p class = "noline">
This line would not have any underline because this belongs to nline class.
</p>
<p>
The first line of this paragraph will be underlined as defined in the
CSS rule above. Rest of the lines in this paragraph will remain normal.
This example shows how to use :first-line pseduo element to give effect
to the first line of any HTML element.
</p>
</body>
</html>
다음 링크를 생성합니다-
: first-letter 가상 요소
다음 예제에서는 : first-letter 요소를 사용하여 문서에있는 요소의 첫 글자에 특수 효과를 추가 하는 방법을 보여줍니다 .
<html>
<head>
<style type = "text/css">
p:first-letter { font-size: 5em; }
p.normal:first-letter { font-size: 10px; }
</style>
</head>
<body>
<p class = "normal">
First character of this paragraph will be normal and will have font size 10 px;
</p>
<p>
The first character of this paragraph will be 5em big as defined in the
CSS rule above. Rest of the characters in this paragraph will remain
normal. This example shows how to use :first-letter pseduo element
to give effect to the first characters of any HTML element.
</p>
</body>
</html>
다음과 같은 검은 색 링크가 생성됩니다.
: before 의사 요소
다음 예제는 : before 요소를 사용하여 요소 앞에 일부 콘텐츠를 추가 하는 방법을 보여줍니다 .
<html>
<head>
<style type = "text/css">
p:before {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>
다음과 같은 검은 색 링크가 생성됩니다.
: after 의사 요소
다음 예제는 : after 요소를 사용하여 요소 뒤에 일부 콘텐츠를 추가 하는 방법을 보여줍니다 .
<html>
<head>
<style type = "text/css">
p:after {
content: url(/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
</body>
</html>
다음과 같은 검은 색 링크가 생성됩니다.