CSS伪元素用于向某些选择器添加特殊效果.您不需要使用JavaScript或任何其他脚本来使用这些效果.伪元素的简单语法如下 :
selector:pseudo-element {property: value}
CSS类也可用于伪元素 :
selector.class:pseudo-element {property: value}
最常用的伪元素如下 :
| Sr.No. | Value&说明 |
|---|---|
| 1 |
:第一行 使用此元素将特殊样式添加到选择器中文本的第一行. |
| 2 |
:第一个字母 使用此元素将特殊样式添加到选择器中文本的第一个字母. |
| 3 |
:之前 使用此元素在元素之前插入一些内容. |
| 4 |
:之后 使用此元素在元素后面插入一些内容. |
:第一行伪元素
以下示例演示如何使用 :第一行元素，用于向文档中的第一行元素添加特殊效果.
<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>
The :first-letter pseudo-element
以下示例演示如何使用: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>
The :before pseudo-element
以下示例演示如何使用: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>
The :after pseudo-element
以下示例演示如何使用: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>