css 伪元素::after

html-css013

css 伪元素::after,第1张

css ::after用来创建一个伪元素,做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 由于伪元素本身是行内元素,所以要变成块级元素的需要使用 display: block 以下是画一个三角形的图案的样式。 content是一定需要的,content 可以是: 值得注意的是: :after 和 ::after的关系

CSS 伪元素用于向某些选择器设置特殊效果。

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1>元素后面插入一幅图片:

h1:after{

  content:url(logo.gif)

}

就是可以在某个标签的前面或者后面添加一个虚拟元素,需结合content使用。

css可以对元素做的事,对这个伪元素都可以做,然后也不奇怪能做出个三角形了(三角形是用很宽的边框+内容宽高都为0做出来的)但是,伪元素因为不在DOM里存在,也不会在调试工具里显示,所以不太好调试。

伪对象:after还有一个重要的用法--清除浮动。这种清除浮动的方法几乎成了一个固定的模式,很多大型网站里面都有用到。

易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

以上内容参考:百度百科-CSS