css 伪选择器（css伪选择器after）



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

2021年11月7日，立冬之时

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

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

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

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

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

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

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

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

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

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

就如element组件中的下拉框：

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

旧写法(:before).

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

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

语法：

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

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

语法:

html代码：

css 代码：

效果图：

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

如下示例：

加了之后就ok拉

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

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

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

html代码：

css代码：

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

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

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

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

效果图：

html代码：

css代码

效果图：

目前还是前端小白，希望大家多多谅解，正在努力中。

大家好，我是博主：主页

一名喜欢文艺却踏上编程这条道路的小青年。

希望：。

：恭喜EDG，我们是冠军。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/81714.html