css样式after的简单介绍

CSS中伪元素after的作用

作用主要是利用伪元素装饰内容 (无论是装饰图片还是音效) 而不需要更改 HTML 的内容，从而帮助内容与样式更好地分离。因为如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素，这上对于实际内容来说其实是多余的，对自动分析网页的语义也可能会产生不好的影响 (这取决于分析程序的具体实现)。

应该说，::before 和 ::after 伪元素的初衷还是用于插入内容——不受文档约束，也不影响文档本身（比如，不影响 DOM），只影响最终的样式。

CSS 规范中给的例子很典型：p.note:before { content: "Note: " } ——这种插入的内容本身其实不是真正的内容，其实是身为文本的样式，所以没必要在 HTML 中重复出现，交给 CSS 来生成会很不错。

不过目前最多见的应用情形的确是把它们用成 content: "" 这样的空元素，然后给这个空元素加上各种样式。这样来说利用的就只是它这个元素的「存在」了（而非元素的内容），已经是讨巧的 hacking 了。

相关问答

Q1: CSS中"::after与::before"的作用是什么？

首先要明白一种思想：结构和样式分离。

结构和样式分离，就意味着：没有样式表，HTML文档也是一个完整的文档；没有样式表，也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""; ------就算没有------:before 和 :after中的content: "";------HTML文档也不会受到影响，HTML文档也是一个完整的文档，所以，用简单的话来说： :before 和 :after中的content: "";不过是对HTML的装潢，使HTML看起来更漂亮一些。

延展阅读

CSS中伪元素after的作用

css可以对元素做的事，对这个伪元素都可以做，然后也不奇怪能做出个三角形了（三角形是用很宽的边框+内容宽高都为0做出来的）。

但是，伪元素因为不在DOM里存在，也不会在调试工具里显示，所以不太好调试伪对象:after还有一个重要的用法--清除浮动。

这种清除浮动的方法几乎成了一个固定的模式，很多大型网站里面都有用到。

以下代码：

.weibo-clearfix:after{clear:both;content:".";display:block;height:0;width:0;visibility:hidden;}

Q2: CSS中的after是什么意思

除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。

而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。

本文中其它伪元素暂且不表，单说:after伪元素。

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。

这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。

所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

下面举个例子，在CSS代码中插入：

style type="text/css"

h1:after {content:url(logo.gif)}/styleHtml：h1标题内容/h1

在显示时，标题内容后会插入一张图片。这就是伪元素:after的作用。

伪元素:after另外一个常用的作用在原来的文章中曾经提到过，有些同学可能还记得，那就是清除浮动。

在CSS中加入带有CSS伪类:after的内容：

.clear:after {height:0;content:".";

clear:both;

Q3: css中的after是什么意思

:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

h1:after

{

content:url(beep.wav);

}

此样式会在每个 h1 元素之后播放一段声音：

style type="text/css"

h1:after {content:url(/i/w3school_logo_white.gif)}

/style

h1This is a heading/h1

这是在h1后面插入一张图片，但IE

Q4: css的:after是什么意思呢？

简单的可以理解是尾巴。其实这是css不好理解的一个东西，不好理解的地方在于，我始终不清楚为什么会有这么一个东西。请看下面大屏幕标的地方，和我右边自定义的css。