「后端小伙伴来学前端了」CSS3伪元素选择器 ::before ::after | 记录自己的前端学习日子

宁在春

发布于 2022-10-31 15:27:31

1.2K0

发布于 2022-10-31 15:27:31

文章被收录于专栏：关于Java学习@宁在春

写在前面：最近冷空气来临,大家注意保暖,如果有时间，也给许久未见的家人、朋友、那个你想见没去见的人打个冬日的暖心电话吧。别等了，就这次吧。 2021年11月7日，立冬之时

前言

本文适合前端小白，或者是复习CSS的小伙伴，因为作者还是个前端小白（😁）。

一直经常会看到这两玩意，但是一直没去了解这个东东，光肝Java啦，现在是为了完成老师的任务，每天是一边学一边敲代码。

个人感觉前端好玩还是好玩，样式难调也是真的难调。

今天也是学到了这个小知识，趁着更文分享给大家。

一、伪元素概念

其实从字面意思上理解即可，伪字吗，就是假的意思。伪元素其实就是一个真的存在但又是假的元素，它存在内容，但是它本身并不存在于文档树当中，也没有任何html标签。

二、我们为什么要使用伪元素？

H5之后，增加了很多语义化的元素进来，如nav、hader、footer这种语义化标签，让文档树更为清晰的，也能让样式和内容更好的分离。

而画页面的我们都知道，其实我们写的很多标签都是没有明确的语义的，就只是为了实现某种样式而额外添加的元素。而很多这种需要额外添加元素的实现的样式，恰巧可以利用伪元素装饰内容 (无论是装饰图片还是音效) 而不需要更改 HTML 的内容，从而帮助内容与样式更好地分离。

就像如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素，这上对于实际内容来说其实是多余的，对自动分析网页的语义也可能会产生不好的影响。

简而言之：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

应用场景

简单说几个最常见的例子吧。如下拉选择框中的那个小角标、遮罩层、清除浮动

就如element组件中的下拉框：

另外一些小图标、一些小三角同样也是伪元素做的。

三、::before 和 ::after

3.1、::before

旧写法(:before).

::before,在元素内部的前面插入内容。

CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。另外content属性是必填的属性。

语法：

/* CSS3 语法 */
element::before { 样式 }

/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
element:before  { 样式 }

/* 在每一个p元素前插入内容 */
p::before { content: "Hello world!"; }

3.2、::after

::after在元素内部的后面插入内容。

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

语法:

element:after  { style properties }  /* CSS2 语法 */

element::after { style properties }  /* CSS3 语法 */

3.3、简单示例

html代码：

<div class="box1">
    我是博主
</div>

css 代码：

.box1::before{
    content:"大家好"
}
.box1::after{
    content:"宁在春"
}

效果图：

如果我们要给这些伪元素设置宽度、高度什么，一定得写上display:inline-block属性，否则不会生效。

如下示例：

加了之后就ok拉

before 和盒子和 after 之间的关系大致如下图

3.4、注意点

before和after会创建一个元素，但是创建出来的元素是属于行内元素。
另外新创建的元素在文档树中是找不到的
before 和 after 必须有content 属性
before 在父元素内容前面创建元素，after 在元素内容的后面插入元素
伪元素选择器和标签选择器一样，权重为1

五、伪元素实现案例

5.1、场景五：伪元素字体图标

就是做一个像element做一个这样的。但是我不想那么复杂，这里就用个小火箭🚀模拟一下。

html代码：

<div class="box1">
</div>

css代码：

.box1{
    width: 200px;
    height: 35px;
    border: 1px solid #ccc;
}
.box1::after{
    content:"🚀"
}

我们初始化的页面是这样的：

我们要放到那里去，第一个想法就是做定位。

伪元素它的父元素就是盒子本身，然后我们只需要设置父盒子相对定位即可，再设置伪元素绝对定位。

所以我们只需要修改一下css样式即可

.box1 {
    width: 200px;
    height: 35px;
    border: 1px solid #ccc;
    position: relative;
}
.box1::after {
    content: "🚀";
    right: 10px;
    position: absolute;
    top: 6px;
}

效果图：

5.2、照片遮罩层

html代码：

<div class="box1">
    <img src="./123.jpg">
</div>

css代码

.box1 {
    width: 400px;
    height: 200px;
    position: relative;
}
.box1 img{
    width: 100%;
    height: 100%;
}
.box1::before {
    content:"";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgb(0, 0, 0,0.3)
}
/* 当我们鼠标经过了这个盒子 就让里面的遮罩层显示出来 */
.box1:hover::before{
    /* 经过就让::before 显示出来 */
    display:block;
}

效果图：