CSS中的before和:after伪元素深刻理解

一、定义：

“伪元素”，顾名思义。就是它建立了一个虚假的元素，而且将其虚假的元素插入到目标元素的内容以前或以后。

2：特色：

a、它在实际文档中不改变什么，可是对用户可见，能够经过css控制，源码中看不到

b、伪元素若是没有设置“content”属性，伪元素是无用的。

你能够设置content属性值为空，而且仅仅把他当作一个内容不多的盒子，例如

#example:before {   
  content: "";   
  display: block;   
  width: 100px;   
  height: 100px;   
}  

然而，你不能够彻底的移除content属性，若是你移除了，伪元素将不会起做用。至少，content属性须要空引用做为它的值(即:content:“”)。

c、插入的内容在页面的源码里是不可见的。只能在css里可见

同时，插入的元素在默认状况下是内联元素（或者，在html5中，在文本语义的类别里）。所以，为了给插入的元素赋予高度，填充，边距等等，你一般必须显式地定义它是一个块级元素。

d、注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。（切记不是元素的前和后）

e、content属性的值，置为空字符串或是插入文本内容，还有额外的选择

首先，你能够包含一个指向一个图像的URL，就像在css里包含一个背景图像同样

p:before {   
  content: url(image.jpg);   
}  

注意不能使用引号。若是你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”做为其内容，插入的而不是图像自己。

固然，你能够包含一个Data URI代替图像引用，正如你能够用css背景同样。

你还能够选择ATRR(X)中的函数的形式。此功能，“把X属性的值以字符串的形式返回”

a:after {   
  content: attr(href);   
}  

attr（）函数的功能是什么？它获得特定属性的值并把它做为插入的文本成为一个伪元素。

 

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-jiaocheng/tc50528.shtml