before、after小案例

before、after小案例

做这个小案例之前我们需要知道before和after是什么？要怎么用？看以下截图

首先在W3School里：before的定义是选择器在被选元素的内容前面插入内容。意思就是在一个元素前面添加内容，这里可以添加文字等内容，也可以在添加的内容里设置一些样式。但是一旦用到before或after这个伪元素就必须要有content这个属性在里面，因为我们添加的内容就在这个属性里面添加。after也是一样的，只是它是在元素后面添加而已。看下面代码截图。

下面是上面代码的效果。

接下来我们开始讲before、after的小案例。这个效果就是有两个半透明的白色从这张图的左上角和右下角开始出发到另一个角，这两个角会从一个半透明到一个消失的过程。下面是做好了的案例的中途效果，可以大致的看一下。

首先是这个小案例的源代码，如下图可见。

如图可见，这个案例的源代码很简单，就一个div里面包裹着一个a标签，a标签再包裹着一个img标。接下来就是样式，如下图可见。

这是源代码里的sale1的部分样式，重点就是position这个属性，有了这个定位才可以很好的完成接下来的效果。接下来讲的就是左上角的那个半透明的出现到消失的样式，如下图可见。

这里开始使用到了before这个伪元素了，就是在sale1前面加上一个背景颜色，透明度调为0.3，然后再给一个定位，这是重点1，然后这个定位就定在了sale1的左上角，重点2就是高度宽度要设为0px。
重点3就是opacity这个属性，这个属性是透明度的意思，透明度值为0~1。0表示完全透明，1表示不透明，这里要设为1。
接下来就是给 sale1一个hover的一个伪元素，在W3School里：hover的定义是在鼠标移到元素上时向此元素添加特殊的样式。然后给sale1鼠标移到元素上一个特俗样式，就是设sale1移上去高度宽度为100%，然后过度的时间为1秒，透明图为0.这样出来的效果就是从一开始的透明度为1但是高度宽度为0然后移上去高度宽度为100，但是它会从透明图为1降到0.就会有我们想到的从不透明到透明的效果。
接下来就是右下角的那个半透明的出现到消失的样式，这个的样式和左上角的大致一样，就是定位的时候定在了右下角而已。看以下截图。

还有一个点就是有些人不明白after不是在元素后面添加内容吗？为什么这里也可以在元素前面添加内容。是因为他们都用了定位都脱离了文档流，所以才会都在元素前面展示。