本文目录
- CSS中的after是什么意思
- CSS 中双冒号后跟after 或before ,而伪类是单冒号后跟after 或before
- css 伪元素 ：before，：after 用法，在ie下有效果，在火狐，谷歌下失效，大神帮忙看看.
- CSS中“::after与::before“的作用是什么
- css中的:before、:after等虚拟元素有什么用途
- 使用前缀:before和后缀:after的好处，以及它们的应用场景，
- 微信小程序 CSS 选择器::after和::before的简单使用
- 伪元素before和after用法的区别
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;
CSS 中双冒号后跟after 或before ,而伪类是单冒号后跟after 或before
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。伪元素由双冒号和伪元素名称组成。双冒号是在css3规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全
css 伪元素 ：before，：after 用法，在ie下有效果，在火狐，谷歌下失效，大神帮忙看看.
你说反了吧？你这段代码在FireFox、Chrome有效（我已经试过了），在IE（指IE6/7/8/9）中是无效的。原因在于transition是css3属性，IE不支持（IE10/11是支持的）。另外在IE7/8中要想使用before和after伪元素，必须声明 《!DOCTYPE》
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;}
css中的:before、:after等虚拟元素有什么用途
就是可以在某个标签的前面或者后面添加一个虚拟元素,需结合content使用可以像设置普通标签一样设置该元素的css样式 如下:div:after { visibility: hidden; clear: both; display: block; height: 0px; content: "."}这段代码可以闭合浮动元素
使用前缀:before和后缀:after的好处，以及它们的应用场景，
好处：CSS样式表的主要作用是修饰Web页面上的HTML标记，但有时候，为了实现某个效果而往页面里反复添加某个HTML标记很繁琐，或者是显得多余，或者是由于某种原因而做不到。这就是CSS伪元素(Pseudo-Element)可以发挥作用的地方，所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。应用：写法是 :before和:after，举例这里将出现在blockquote元素的之前和之后，添加的内容。blockquote:before {content: open-quote;}blockquote:after {content: close-quote;}
微信小程序 CSS 选择器::after和::before的简单使用
前两天看 文档 看到选择器那块儿的时候，前面4个基本都能理解： .class ， #id ， element ， element, element ，但后面两个 ::after 和 ::before （文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记 wxml wxss js 效果 其实，after和before可以添加的不仅仅是像上面这种字符串，以下是可以添加的常用的内容 具体的请参考这篇文章
伪元素before和after用法的区别
区别：1）before是css中的一种伪元素，可用于在某个元素之前插入某些内容。2）after是css中的一种伪元素，可用于在某个元素之后插入某些内容。简单的代码测试： 《style》 p:before{ content: "H" /*:before和:after必带技能，重要性为满5颗星*/ } p:after{ content: "d" /*:before和:after必带技能，重要性为满5颗星*/ } 《/style》 《p》ello Worl《/p》以上的代码将会在页面中展现的是"Hello World"。通过浏览器的"审查元素"看到的内容是：《p》 ::before "ello Worl" ::after《/p》p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"H"；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是"d"。作为一只合格的程序猴子，捍卫"Hello World"的完整存在是必要的。
