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

1、定义：

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

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