伪元素(::after和::before)

于 2022-10-24 10:45:53 发布
阅读量156 收藏
点赞数
分类专栏： css 文章标签： servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52634719/article/details/127487630
版权
本文介绍了CSS中的伪元素如`::before`和`::after`，它们用于在DOM中不存在的元素上添加内容。通过示例展示了如何在所有`p`元素前添加`readthis`，以及如何利用图标字体实现特定图形。此外，还讲解了伪类如`:focus`的使用，并强调了伪类与伪元素的区别。
摘要由CSDN通过智能技术生成

带两个冒号的叫伪元素,即根本不存在的元素，假的虚拟的元素

 

这两个更常用 

 这里是在所有的p前面加上read this

 

 

 又比如这里有个房子,就是用类似这个技术实现的

 我们打开检查看下

 before就出来了

 800是一个图标字体，即这个房子就是一个字体

 然后是::after

 

 

 然后我们再把焦点放到一个冒号的

一个冒号的叫伪类

 

爱雨天
关注
专栏目录
伪类(:)和伪元素(::)的区别
尊哥的博客
04-10 3367
伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，CSS3才对这两个概念做了相对较清晰的概念，下面看看css2和css3中对这两个概念的定义： 伪类 - pseudo classes CSS2中对伪类的定义： CSS 伪类用于向某些选择器添加特殊的效果。 单单看定义看不懂在讲什么。 CSS3对伪类的定义： The pseudo-class conc...
CSS伪元素：after：before的特殊用法demo
06-19
在这个特定的示例中，我们关注的是CSS中的两个重要概念：伪元素`:after`和`:before`。这两个伪元素允许我们在不添加额外HTML标记的情况下，向元素的内容中插入内容。 `:after`和`:before`伪元素在CSS3中被引入，...
伪元素:after和:before
lkl713的专栏
06-03 881
::after是一个CSS伪元素，使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容，但这些内容能像普通内容一样显示，基本的效果是这样的: CSS代码 div::after { content: "你好"; } HTML代码 div> 你好 div> ::before跟::afte
伪元素::before和::after
m0_63341874的博客
12-04 191
伪元素：：before和：：after 原先在一些网页上看到了这一类伪元素，在翻找了一些资料后，有一些收获。可能不齐全。
CSS伪类(pseudo class)简明介绍之:before和:after
cl09006511的博客
05-03 218
日期：2012-4-26来源：GBin1.com 在线演示 本地下载 在线调试如果大家经常关注互联网新网站和应用的话，或者你喜欢收集不同的网站模板，你会发现越来越多的网站模板或者网站在使用C...
对伪元素::after和::before的理解
蜗蜗牛在路上的博客
11-17 3180
随着技术的发展，各种前端库的层出不穷，在追赶新技术的同时，各种秀操作和实现，有时候发现其实那么吊炸天的操作，其实只需要用最简单的基础方式就可以实现，所以，框架用习惯了，就不知道底层是怎么个用法了，我想仅仅做一个代码的搬运工可不是什么好的主意，框架用的再怎么熟也只是照着别人规定好的路子出牌，知其所以然才是我们学技术的核心吧 :before和:after在css1中就有了，但是在css3中写法改为了
CSS3中伪元素::before和::after的用法示例
09-24
before 和 after其实就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，这篇文章主要给大家介绍了关于CSS3中伪元素::before和::after的用法...
CSS伪元素 :before, :after, box-shadow应用
09-25
本文将重点介绍CSS中的伪元素`:before`和`:after`以及`box-shadow`属性的应用，这三个特性可以帮助我们创造出富有创意和视觉吸引力的设计。 首先，CSS伪元素`:before`和`:after`允许我们在元素内容的前面或后面添加...
CSS伪类:before在元素之前 :after 在元素之后实例讲解
09-25
特别地，CSS伪类中的`:before`和`:after`是生成内容的伪元素，它们能够在元素内容的前面或后面动态地添加额外的元素，让网页表现更加丰富和灵活。 ### CSS伪类:before和:after的基本概念 `:before`和`:after`被...
关于在审查元素中看到的::before与::after
a538641097的博客
05-12 556
审查元素中看到的这两个标签，表示内容并不在元素中，而是在css中，可以查看style看到具体内容。 一般来说这样做是为了清除浮动（clearfix）的代码，防止后边的容器因为浮动出现布局的混乱。 添加在选择到的元素内部之前和之后。 如下写法： div:before { content: "\0020"; display: block; height: 0; ...
selenium2library 如何定位伪元素,比如::before
热门推荐
xyh421的专栏
03-29 1万+
以前没有遇到这个问题,突然项目中出现了,没有办法解决啊,心里焦急,就去stackflow 求解了,还好老外效率.所以秉着分享的原则,我立马更新到这里来.希望对大家有帮助. 问题: 如何定位这个close按钮? 解决办法:css定位 Clicking element 'css=span.layui-layer-setwin>a'.
css ::before和:befor的用法和区别以及伪元素和伪类的区别
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-29 3448
前言：css是前端不可缺少的一部分，也很重要。厉害的前端可以用最简洁的css，实现美观的布局。 下面我们来说一下::befor和:befor的用法及区别？ 在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。 利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要...
《Leetcode of September 》回溯算法之：47. 全排列II
奥古斯都
09-08 229
看题解看到一个比较形象的图，来自https://leetcode-cn.com/problems/permutations-ii/solution/hui-su-suan-fa-python-dai-ma-java-dai-ma-by-liwe-2/ class Solution: def permuteUnique(self, nums: List[int]) -> List[List[int]]: def huisu(n,temp,visited): ...
浅谈css的伪元素::after和::before
weixin_30702413的博客
11-23 3809
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 The CSS ::before(::after)pseudo-elementmatches ...
css伪类和伪元素（Pseudo-elements）区别
binlety
08-01 1035
CSS 伪类 (Pseudo-classes) W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。 属性 描述 CSS :active 向被激活的元素添加样式。 1 :focus 向拥有键盘输入焦点的元素添加样式。 2 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1 :link ...
浅谈css的伪元素::after和::before && 给伪元素添加点击事件
东方雨舞
05-25 8009
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 The CSS ::before(::after)pseudo-elementmatches a virtual first(last) child of the selected element. It ..
伪元素和伪类的区别总结
x1037490413的博客
09-11 7993
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 伪元素选择符 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。 伪类选择符 再看看W3C中对于二者应用的描述： 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 其实根本意思就是就是对那些不能通过class、id等选择元素的补充 举个栗子： 如果我
伪类与伪元素的介绍和区别&:after/::after和:before/::before的异同
weixin_49115895的博客
09-19 3759
伪类与伪元素的介绍和区别 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 伪元素本质上是创建了一个有内容的虚拟容器； CSS3中伪类和伪元素的语法不同； 伪类 :link :hover 伪元素 ::before ::after 可以同时使用多个伪类，而只能同时使用一个伪元素； 其中伪类和伪元素的根本区别在于：它们是否创造了新的元素, 这个新创造的元素就叫 “伪无素” 。 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元
THUCNews中文文本分类数据集包含84万个新闻文档，共14个类别；基于此模型测
最新发布
09-30
THUCNews中文文本分类数据集包含84万个新闻文档，共14个类别；基于此模型测试BERT多个版本的分类性能_ TextClassifier
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值