CSS中的伪元素
1、什么叫做伪元素?
我们可以回忆一下我们之前使用的伪类的样子,较之于伪类,伪元素是像往标记文本中加入全新的 HTML 元素一样,而不是向现有的元素上应用类。也就是说我们直接在文本上使用span标签还是作用于span 标签。
2、伪类的表现形式是什么?
::伪类名
3、介绍一下常用的伪元素名字及其样式。
——::first-line 这个可以选择我们页面中的第一行进行更改样式。
案例如下:
<!DOCTYPE html> <html> <head> <title>test1</title> <styletype="text/css">p::first-line{color:red; } </style> </head> <body> <p>SHANGHAI, China (AP) China extended its crackdown on dissent into cyberspace for the first time Wednesday, sentencing a software entrepreneur to two years in prison for giving e-mail addresses to dissidents abroad.
Lin Hai, 30, was convicted of subversion in a case that highlighted China's conflicting efforts to promote Internet use for business and education at the same time it is stamping out political activity.
Subversion is among China's most serious crimes and is normally used against political dissidents.
The conviction of Mr. Lin is no more than a brutal act of suppression of dissent, and China will certainly be severely criticized,'' said Albert Ho, secretary-general of the Hong Kong Alliance for the Promotion of the Democratic Movement in China.</p> </body> </html>
结果:
——::before和::after 案例
<!DOCTYPE html> <html> <head> <title>test1</title> <styletype="text/css">p::first-line{color:red; }p::before{content:"balabala";color:greenyellow; }p::after{content:"henry";color:blue; } </style> </head> <body> <p>SHANGHAI, China (AP) China extended its crackdown on dissent into cyberspace for the first time Wednesday, sentencing a software entrepreneur to two years in prison for giving e-mail addresses to dissidents abroad.
Lin Hai, 30, was convicted of subversion in a case that highlighted China's conflicting efforts to promote Internet use for business and education at the same time it is stamping out political activity.
Subversion is among China's most serious crimes and is normally used against political dissidents.
The conviction of Mr. Lin is no more than a brutal act of suppression of dissent, and China will certainly be severely criticized,'' said Albert Ho, secretary-general of the Hong Kong Alliance for the Promotion of the Democratic Movement in China.</p> </body> </html>
显示结果:
也就是说实际上这些伪元素都是可以加样式的,就是我们通常情况下最后面一下仅仅是加一些指向性的图标,加文字意义不是很大。
4、那么使用::after如何加图标呢?
案例:
p::after{
content: "";
display: block;
width: 100px;
height:100px;
background-image: url("html_test/img/zhaojinmai.jpg");
border: 1px solid black;
}
输出结果: