鼠标|HTML的应用技巧之新增伪元素选择器

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

1.新增伪元素选择器的原理：1）:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。格式如下：

2）:after伪元素选择器用于在被选元素的内容后面插入内容，必须配合content属性来指定要插入的具体内容。格式如下：

3.伪元素选择器的应用场景实例：1）如下图所示，我们可以配合字体图标进行使用，具体方法如下：

第一步，首先我们新建一个div并设置高度、宽度以及边框

第二步，我们将字体图标样式引进来（忘记字体图标的使用，可以翻看往期教程）

第三步，我们利用伪元素选择器将图标加进去。为了使图标能够靠右对齐，我们利用定位进行位置的设置：

2）如下图，我们想要实现当鼠标经过时，图片加上一层不透明的效果。具体方法如下：

第一步，首先我们先放一张图片，并设置好宽度和高度。

第二步，我们创建一个伪元素，宽度和高度与图片相同，并设置颜色。

第三步，我们创建的伪元素由于是在div内部前面创建的，因此我们会发现，它与图片并列显示，因此我们将伪元素加上绝对定位。在鼠标经过之前是，不显示。
第四步，当鼠标经过图像的时候，显示伪元素：
【鼠标|HTML的应用技巧之新增伪元素选择器】

鼠标|HTML的应用技巧之 新增伪元素选择器

鼠标|HTML的应用技巧之新增伪元素选择器