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

猜你喜欢

转载自www.cnblogs.com/gopark/p/10204668.html