CSS伪元素
:first-line;
:first-letter
:before
:after
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line
{
color: #ff0000;
font-variant: small-caps
}
浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:第一行文字设置样式为红色,第二行为默认样式
注释:"first-line" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-line" 伪元素:
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式:
p:first-letter
{
color: #ff0000;
font-size:xx-large
}
第一个文字设置样式
注释:"first-letter" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-letter" 伪元素:
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
:before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容
h1:before {content:"///";
color:red;
font-size:small;}
This is a heading
:after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after {content:".......";
color:red;
font-size:small;}
This is a heading
伪元素与 CSS 类
伪元素可以与 CSS 类配合使用:
p.article:first-letter{color: red;}
This is a paragraph in an article。
多重伪元素
可以结合多个伪元素来使用。
p.article:first-line{color: blue;}
p.article:first-letter{color: red;}
p.article:after
{
content:".....";
font-size:xx-large;
}
This is a paragraph in an article。
:first-letter与:before混合使用时:first-letter会失效
p.article:first-line{color: blue;}
p.article:first-letter{color: red;}
p.article:before
{
content:"/";
font-size:xx-large;
}
This is a paragraph in an article。