CSS中伪元素after的作用
2个回答
2013-08-16
展开全部
作用主要是利用伪元素装饰内容 (无论是装饰图孝此片还是音效) 而不需要更改 HTML 的内容,从而帮助内容与样式更好地分离。芹慎灶因为如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素,这上对于实际内容来说其实是多余的,对自动分析网页的语义也可能会产生不好的影响 (这取决于分析程序的具体实现)。
应该说,::before 和 ::after 伪元素的初衷还是用于插入内容——不受文档约束,也不影响文档本身(比如,不影响 DOM),只影响最终的样式。
CSS 规范中给的例子很典型:p.note:before { content: "Note: " } ——这种插嫌扮入的内容本身其实不是真正的内容,其实是身为文本的样式,所以没必要在 HTML 中重复出现,交给 CSS 来生成会很不错。
不过目前最多见的应用情形的确是把它们用成 content: "" 这样的空元素,然后给这个空元素加上各种样式。这样来说利用的就只是它这个元素的「存在」了(而非元素的内容),已经是讨巧的 hacking 了。
应该说,::before 和 ::after 伪元素的初衷还是用于插入内容——不受文档约束,也不影响文档本身(比如,不影响 DOM),只影响最终的样式。
CSS 规范中给的例子很典型:p.note:before { content: "Note: " } ——这种插嫌扮入的内容本身其实不是真正的内容,其实是身为文本的样式,所以没必要在 HTML 中重复出现,交给 CSS 来生成会很不错。
不过目前最多见的应用情形的确是把它们用成 content: "" 这样的空元素,然后给这个空元素加上各种样式。这样来说利用的就只是它这个元素的「存在」了(而非元素的内容),已经是讨巧的 hacking 了。
2015-07-10
展开全部
辩轿
可以直接把伪元素理解成一个元素;
css可以对元素做携汪肆的事,对这个伪元素都可以做,然后也不奇怪能做出个三角形了(三角形是用很宽的边框+内容宽高都为0做出来的陵辩)
但是,伪元素因为不在DOM里存在,也不会在调试工具里显示,所以不太好调试
伪对象:after还有一个重要的用法--清除浮动。
这种清除浮动的方法几乎成了一个固定的模式,很多大型网站里面都有用到。
以下代码:
.weibo-clearfix:after{clear:both;content:".";display:block;height:0;width:0;visibility:hidden;}
可以直接把伪元素理解成一个元素;
css可以对元素做携汪肆的事,对这个伪元素都可以做,然后也不奇怪能做出个三角形了(三角形是用很宽的边框+内容宽高都为0做出来的陵辩)
但是,伪元素因为不在DOM里存在,也不会在调试工具里显示,所以不太好调试
伪对象:after还有一个重要的用法--清除浮动。
这种清除浮动的方法几乎成了一个固定的模式,很多大型网站里面都有用到。
以下代码:
.weibo-clearfix:after{clear:both;content:".";display:block;height:0;width:0;visibility:hidden;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询