伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。具体的伪类和伪元素相关知识本文就不深入，下面介绍一下从青铜到王者10个css3伪类使用技巧和运用。

众所周知，Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但repaint消耗较多，于是这里提出通过修改伪元素的透明度来实现盒子阴影

实现原理：

**通过改变透明度，这样从一个非默认值更新它的值，就不需要承担任何重绘

这里设置一个空的伪元素设置阴影透明度为0隐藏，再通过鼠标悬停恢复它的透明度，下面是传统和伪类实现的代码对比

<divclass="before"><h2>Before</h2><p>Animate/transitionbox-shadow可以使用box-shadow属性来实现盒子阴影效果，但重绘消耗较多</p></div><hr/><divclass="after"><h2>After</h2><p>通过修改伪元素的透明度来实现同样的效果,没有重绘消耗</p></div>

.before{padding:1em;background-color:#fff;-webkit-transition:0.2s;transition:0.2s;}.before:hover{box-shadow:0010px0rgba(0,0,0,0.3);}.after{position:relative;padding:1em;background-color:#fff;}.after:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;box-shadow:0010px0rgba(0,0,0,0.3);opacity:0;will-change:opacity;-webkit-transition:0.2s;transition:0.2s;}.after:hover:before{opacity:1;}
青铜-2、伪元素:before实现的面包屑导航栏

<ulclass="breadcrumb"><li><ahref="#">Home</a></li><li><ahref="#">Pictures</a></li><li><ahref="#">Summer15</a></li><li>Italy</li></ul>

ul.breadcrumb{padding:8px16px;list-style:none;background-color:#eee;}ul.breadcrumbli{display:inline;}ul.breadcrumbli+li:before{padding:8px;color:black;content:"/\00a0";}ul.breadcrumblia{color:green;}

效果：

实现原理：三边设置边框，箭头指向的那个方向的border不用设置，位于箭头两边的边框颜色为透明（transparent），对边为主体边框颜色（较大的）/主体背景颜色（较小的），因为我们要有边框颜色的三角箭头，当第一个箭头（较大的）被第二个箭头（较小的）通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了，其颜色就是较大的那个三角箭头的颜色，可调。而较小的那个三角箭头的颜色要设置成主体颜色，进行负值定位偏移时要把主体边框盖住，从而与主体合在一起了

<divclass='container'><imgalt=''src='http://placehold.it/400x200'><divclass='arrow-left'></div></div><divclass='containernew'><divclass='arrow-right'></div><imgalt=''src='http://placehold.it/400x200'></div>

.arrow-left:before{z-index:9999;content:"";display:block;width:0;height:0;border-top:20pxsolidtransparent;border-bottom:20pxsolidtransparent;border-right:20pxsolid#E9E9E9;position:absolute;left:-20px;top:80px;}
青铜-5、伪类after实现的图片箭头
青铜-6、伪元素实现带角度的底部边界（倾斜的边界）

原理：修改webkit-transform: skewY属性来修改倾斜度（旋转也是一样的道理）

.edge--bottom{position:relative;z-index:1;}.edge--bottom:after{background:inherit;content:'';display:block;height:50%;left:0;position:absolute;right:0;z-index:-1;}.edge--bottom:after{bottom:0;-webkit-transform:skewY(-1.5deg);-ms-transform:skewY(-1.5deg);transform:skewY(-1.5deg);-webkit-transform-origin:100%;-ms-transform-origin:100%;transform-origin:100%;}
王者-1、伪元素和平移（translate）变换实现的提示框

<divclass="row"><arel="nofollow"rel="noreferrer"href="#"class="btntooltiptop"><span>TOOLTIPTOP</span><spanclass="tooltip-content">Loremipsumdolorsitamet</span></a></div>

.tooltip.tooltip-content::after{background:#05a8ff;content:"";height:10px;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:10px;}.tooltip.top.tooltip-content{bottom:calc(100%+1.5em);left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}.tooltip.top.tooltip-content::after{bottom:-5px;left:50%;margin-left:-5px;}
王者-2、使用CSS3伪元素实现的自动打字动画

原理:Typing Animation with Pseudo-Elements 看起来是打字，其实是使用伪元素覆盖在字符串上，然后逐渐减少伪元素覆盖宽度来实现的视觉效果

<div><h2>TypingAnimation</h2><pclass="tagline"><spanclass="tagline-skill"><spanclass="tagline-skill_inner">webdesign</span></span></p></div>

.tagline-skill_inner:after{content:"";position:absolute;top:-1px;right:0;bottom:-2px;left:0;border-left:1pxsolid#fff;background-color:#2a2a28;-webkit-animation:animatetoright1ssteps(10)infinitealternate;animation:animatetoright1ssteps(10)infinitealternate;}
王者-3、CSS3 伪元素构建的文章水印背景

h2{position:relative;margin:0;font-weight:bold;letter-spacing:-0.05rem;line-height:1;text-transform:uppercase;z-index:10;}h2:before{content:"2018/08";font-family:monospace;font-size:10rem;position:absolute;top:2rem;left:-2rem;z-index:0;line-height:1;color:rgba(50,25,0,0.1);}
王者-4、CSS3 用伪元素做页码摘要

a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:rownowrap;-ms-flex-flow:rownowrap;flex-flow:rownowrap;-webkit-box-align:baseline;-webkit-align-items:baseline;-ms-flex-align:baseline;align-items:baseline;text-decoration:none;-webkit-transition:color.2sease-in-out;transition:color.2sease-in-out;}a::before{height:.1em;-webkit-box-flex:1;-webkit-flex:11auto;-ms-flex:11auto;flex:11auto;-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;background:leftbottom/containrepeat-xurl(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDIiPjxjaXJjbGUgZmlsbD0iI2ZmZiIgY3g9IjMuNSIgY3k9IjEiIHI9IjEiLz48L3N2Zz4=);content:'';}a::after{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2;content:"p."attr(data-page);}王者-5、伪类兼容性了解一下

1、IE8不支持CSS3中很多特性，比如伪元素nth-child，可以使用+号（代表相邻元素）来实现相同功能

2、Google的IE9.js是解决IE5.5到IE8 CSS3特性兼容性问题的JS库

CSS的世界很美好，每个知识点都可以值得深入研究和实践，对于伪类、伪元素也有很多土味特效可以写出来，比如说图片遮罩、图片背景模糊，更多高级的鼠标经过事件特效等等