伪元素伪元素可以做什么？我们要他干什么？它能为我们解决什么问题？与其他方法相比，她的优势是什么？我们为什么用它？伪元素就像伪类一样被添加到选择器中，但它们不描述状态。它们允许我们为元素的某些部分设置样式；使用伪元素，我们可以简化页面的html标签，使用起来也很方便。善于使用伪元素元素可以让你的页面更加简洁优雅。之所以称为伪元素，是因为它修改了不在文档树中的部分；它并不真正存在；伪元素实用tips1.clearfloating什么是clearfloating—？如果一个父元素的所有子元素都是浮动的，那么这个父元素就没有高度；父元素没有脱离正常文档流，仍然占据正常文档流的空间；如果父元素的相邻元素是内联元素，那么内联元素会在父元素的区域中找地方放置。如果相邻元素是块级元素，那么设置块级元素的margin-top会以这个父元素的起始位置为起点。问题：高度塌陷如何解决？方法：撑起父容器的高度，考虑到浮动的元素不会脱离正常的文档流，其他元素会包围它，所以清除浮动简单有效的方法是让周围的元素不脱离-circling，改成做一个尺子，放在最后，把所有浮动的元素推上去，这个尺子是块级元素，有clearset。因为块级元素会换行，并且设置了它的两边不能跟着浮动元素，所以它在浮动元素下面，就像一把尺子把浮动元素的内容往上推。这可以通过after来实现，因为after是最后一个子元素：.clearfix:after{content:"";显示：块；clear:both;}2.画一条分界线如果我们在开发中遇到这样的需求呢？我们应该如何只用一个简单的css元素来实现呢？解决方法：一个p标签，左右线条用前后绘制：3.计数器动态计算商品数量，我们常用js来实现；我觉得Tellingcss也可以达到这个效果，比js好用多了1.counter-reset：属性createsorresetsoneormorecounters；2.counter-increment：属性递增一个或多个计数器值；3.content：与:before和:after伪元素结合使用，插入生成的内容。一行js代码都可以试一试；这主要是checked和counter的组合，用before/after纯CSS实现，纯属作秀；4.平行四边形有没有办法只做容器的形状，在保持内容不变的情况下倾斜呢？可能你会想到嵌套两层元素，外层skew()，对内容应用一个反倾斜变形来抵消变形的影响。但这意味着我们必须使用额外的HTML元素层来包装内容。一些繁琐的解决方案：伪元素，给伪元素应用样式，改造伪元素，然后把伪元素定位+层级放到容纳元素里，随便说说，不练。让我们试试梯形标签页。我们经常在网页中看到梯形标签页。常用的技术杂乱无章或难以维护。他们是如何意识到的？解决方案：在三维世界中旋转一个矩形。由于透视关系，我们可以在二维图像上看到一个梯形。结合平行四边形实现的方法，可以实现透视：观察者与z=0平面的距离；用于元素3D变形后，内部变形效果是“不可逆”的，这与2D变形不同（2D变形内部的反向变形可以抵消外部变形效果）；为了让他的尺寸更容易掌握，我们可以为他指定transform-origin:bottom;你也可以用scale()对他进行美学操作；try6多列统一布局如何实现如下多列统一布局：通过设置inline-block为伪元素：after，设置width为100%，配合容器的text-align:justify，你可以轻松实现多列的统一布局。那么为什么使用了:after伪元素就可以实现对齐呢？原因是如果有第二行，justify只会对齐第一行，所以这里，我们需要创建一个假的第二行，而:after伪元素正好适合它。需要注意的是，像img/input这样的单个标签是没有before/after伪元素的，因为它们本身是不能有子元素的。如果给img加一个before，浏览器会忽略它。伪元素可以实现很多功能！欢迎大家在评论下一一补充欢迎学习交流sunseeekers
