css 伪元素::after

html-css014

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