Welcome, Old Sport!

css系列教程 – 伪元素::after

by ilikecss ON 2015/05/19 2699

css系列教程伪元素::after, 指插入的内容在被指定的元素之最后显示,通过css样式中的content来指定插入的具体内容。使用这个css属性后我们可以通过对同一个类进行分别样式定义。

.after::after {
    color: green;
    content: "css & html";
    padding-left: 5px;
}

参照上面的案例代码, 在.after样式定义了::after属性,所以我们可以在网页中看到的结果是”Let’s be a web font-end developer with”后面生成的。::after的内容追加不仅限于文字,也可以插入图片路径。

.after::after {
    content: url(xxx.jpg);
}

注意事项:

我们需要注意的是通过伪元素::after生成的图片或文字是计入DOM的,一般我们可以通过浏览器开发者工具来查看css样式来进行测试或调试。做SEO的朋友尽量不采取使用伪元素去添加文本内容,搜索引擎是不会记录这个文本内容的。

请注意区分符号(:)和(::),在css1和css2里面伪元素也是使用一个冒号,就类似于伪类:hover, 然后在css3中引入了双冒号(::)来加以区分。单个冒号(:)被所有浏览器支持,然而双冒号(::)则需要支持IE8以上的高级浏览器。

Chrome Safari Firefox Opera IE Android iOS
2+ 1.3+ 3.5+ 6+ 8+ Yep Yep
2条评论
  1. #1

    金刚禅狮子吼说道:



TOP