数据库|HTML的应用技巧之 新增伪元素选择器

数据库|HTML的应用技巧之 新增伪元素选择器

文章图片

数据库|HTML的应用技巧之 新增伪元素选择器

文章图片

数据库|HTML的应用技巧之 新增伪元素选择器

文章图片

数据库|HTML的应用技巧之 新增伪元素选择器

文章图片

数据库|HTML的应用技巧之 新增伪元素选择器

文章图片

数据库|HTML的应用技巧之 新增伪元素选择器

文章图片

数据库|HTML的应用技巧之 新增伪元素选择器

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


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

【数据库|HTML的应用技巧之 新增伪元素选择器】
3.伪元素选择器的应用场景实例:1)如下图所示 , 我们可以配合字体图标进行使用 , 具体方法如下:

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

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

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

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

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

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

第三步 , 我们创建的伪元素由于是在div内部前面创建的 , 因此我们会发现 , 它与图片并列显示 , 因此我们将伪元素加上绝对定位 。 在鼠标经过之前是 , 不显示 。
第四步 , 当鼠标经过图像的时候 , 显示伪元素: