DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
CSS 中的 ::before
和 ::after
伪元素允许您在页面上插入内容,而无需将其包含在 HTML 中。 虽然最终结果实际上不在 DOM 中,但它会显示在页面上,就像它在 DOM 中一样,本质上类似于这样
div::before {
content: "before";
}
div::after {
content: "after";
}
<div>
before
<!-- Rest of stuff inside the div -->
after
</div>
使用它们之间的唯一原因是
- 您希望生成的 内容在元素内容之前出现,从位置上看。
::after
内容在源代码顺序中也处于“之后”,因此如果自然地堆叠在彼此之上,它将定位在 ::before 之上。
请注意,内容仍然位于应用了它们的元素的内部。 命名方式感觉它们可能会出现在,你知道,元素之前或之后,但实际上是元素内部其他内容之前或之后。
内容的值可以是
- 字符串:
content: "a string";
— 特殊字符需要以 Unicode 实体的形式进行特殊编码。 请参阅 字形页面。 - 图像:
content: url(/path/to/image.jpg);
— 图像以其精确的尺寸插入,不能调整大小。 由于诸如 渐变 之类的东西实际上是图像,因此伪元素可以是渐变。 - 无:
content: "";
— 对于 清除浮动 和以background-image
形式插入图像(设置width
和height
,甚至可以调整background-size
的大小)很有用。 - 计数器:
content: counter(li);
— 对于 样式化列表 非常有用(但我们也有::marker
可以用于此目的)。 - 换行符:
content: "Killing \A Me \A Softly";
— 当您确实需要换行符时非常有用。
请注意,您可以在 content
属性中插入 HTML 实体,但它们不会渲染或执行任何类似的操作。
content: "<h1>I will not render as a Heading 1</h1>";
:
vs ::
每个支持双冒号 (::
) CSS3 语法的浏览器也支持单冒号 (:
) 语法,但 Internet Explorer (IE) 8 仅支持单冒号,因此目前建议仅使用单冒号以获得最佳的浏览器支持。
::
是较新的格式,旨在区分伪内容和伪选择器。 如果您不需要 IE 8 支持,可以随意使用双冒号。
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 2 | 9 | 12 | 3.1 |
移动设备 / 平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 2.1 | 3.2 |
再说一遍,“Before” 和 “After” 元素的作用是什么?
查看“更多资源”部分。第一个链接本身就是“它们可以做很多很酷的事情”。
我知道我已经迟到了大约 3 年……但是,尽管如此——
它们只是在特定元素之前或之后添加内容。
假设我想在每个元素之后添加一个问号(?)。
我会这样设置样式
将产生以下输出
调低音量是为了什么?
就这么简单!;)
“但是为什么要费心使用它们?”你可能会问。
除了明显的节省工作量的理由外,它们还用于实现一些很酷的 CSS 技巧!
查看底部的丝带:http://cybernext.in
纯粹的 CSS,我的朋友!丝带的折叠角利用了 ::before 和 ::after 伪元素。
查看更多:https://css-tricks.org.cn/snippets/css/ribbon/
我认为你已经知道 :before 和 :after 的重要性。
这是让我感兴趣的事情(:before 和 :after)。
但你仍然保留了视频中的剪裁精灵。
嗨,老师
我可以在 before 和 after 中编写 html 标签吗?
android 支持?
这可能是一个愚蠢的问题,但我对使用两个冒号来定义伪元素感到困惑。
即,
div:after {}
对比
div::after {}
我在互联网上(以及本网站的文章)看到了许多使用单个冒号的资源,但似乎一些“更新”的参考资料使用双冒号。在实际应用中(至少就 IE 而言,具体来说是 IE8),双冒号不兼容,但单个冒号在 IE8 及所有更新的浏览器中有效(至少是我测试过的那些)。那么,如果单个冒号有效,我为什么要使用双冒号呢?
那么,有人可以解释使用双冒号的原因吗?
哎呀……我想我应该完全阅读上面的文章,该文章总结了 IE8 不支持双冒号用法的事实,并建议现在使用单个冒号……这基本上回答了我的问题。谢谢。
这根本不愚蠢。因此,在包括 CSS 2.1 在内的所有 CSS 版本中,都没有办法区分什么是伪类,什么是伪元素。
我仍然是一个初级网页开发者,虽然我现在比刚开始时了解得更多,但在正确区分什么是伪元素,什么是伪类时,有时仍然令人困惑。我相信我们许多人仍然存在的问题。
记住双冒号 (::) 语法表示伪元素,而单个冒号 (:) 语法表示伪类,要容易得多。不再需要猜测。
是为了语义和更好地理解代码,双冒号用于伪元素,如::first-line、::-vendor-scrollbar,而单个冒号用于伪类,如:hover、** :active**
这不是::after 的例子,而是::before 的例子吗?
嗨
— div 中的剩余内容 —
是的。这是 CodePen 演示。
在这种情况下,它不是::before伪元素的示例。让我解释一下。
伪元素在目标元素内部生成一个**虚拟元素**作为**最后一个子元素**。如果您不知道,元素中的每个字母都属于一种称为**行框**的虚拟元素。在这种情况下,<div>元素是空的(没有文本,没有行框),当创建::after伪元素时,它的内容“hi”字符串(由content属性生成)是<div>元素中唯一的元素,这导致了让您感到困惑的错觉。
例如,如果您在该<div>元素中添加任何文本,则“hi”字符串将成为该元素中的最后一个内容。
我希望这能至少稍微澄清您的问题。
我想学习after和before。
如何学习after和before?
请告诉我解决方案。
after before
有人会使用:before或:after标签来生成页面页眉和页脚吗?在语义上,将伪元素应用于标签是否正确?
示例
我认为不行,因为伪元素的内容不在DOM中(甚至无法选择),因此它只对使用视觉浏览器的用户在**视觉上**存在,这排除了屏幕阅读器和网络爬虫,这不是一个好的做法。
重点是我添加的。来源:MDN 文档
::after和::before的HTML示例不是颠倒了吗?
嗨
— div 中的剩余内容 —
必须更改为
— div 中的剩余内容 —
嗨
今天,我使用这些信息为网络应用程序创建了一个通用的加载叠加层
https://gist.github.com/tracend/8553152
谢谢!
这很酷,但是它们之间的**区别**是什么?
感谢您解释:和::之间的区别。
简单而完美
我认为它在Android默认浏览器中不起作用:(... 有解决方案吗?
感谢您关于使用双冒号与不使用双冒号的说明。我在其他地方读到**不要**使用它们,这让我有点沮丧,因为我认为它们在代码中从视觉上来说很有帮助。
我理解为什么人们说不要使用它们(出于与旧版IE版本兼容的原因),但我已经不再考虑使用旧版IE版本进行设计了,所以从现在起,我将使用双冒号!
我想学习after和before。
如何学习after和before?
请告诉我解决方案。
大家好,我需要设置背景。但主要问题是,我希望背景从左到右应用,并且当背景到达右侧时,背景的高度应该随着其向右侧移动而减小……… 我如何在CSS3中应用它?
重新打开此主题 - 是否可以在:after内容上应用伪元素?例如,如果您想以一种简洁的CSS方式将:first-letter应用于它,而不是使用某种针对性的JS字符串解析来实现它。
我在段落中使用了before标签。我在该before标签中使用了图像。如何修复该图像的高度和宽度?
您忘记了
attr
函数,它允许您执行以下操作可以调整内容图像的大小。
那么,使用::after/::before与使用JQuery相比有什么优势?我很难想象使用JQuery以外的方法的情况。
除了您使用“原生”实现的明显原因(让您更好地理解您实际在做什么)之外,使用CSS伪元素比使用JavaScript更快。DOM操作非常昂贵。
很棒的答案,谢谢!
很棒。我一直想学习这个“after before”的东西,但是直到今天卡在一个需要这方面知识才能继续的项目中才开始学习。我想在我的两个项目( lotterywale 和 punjabstatelottery)中编码标题装饰。
我希望我能成功地编码。如果不行,我会在这里寻求帮助。
非常感谢,
Amitoj
是否可以在类中使用伪元素?
例如:
.className li::before {
}
谢谢
CSS 选择器中 after 和 before 元素有什么用?
抱歉,但将 CSS 属性插入带有 after 选择器的类(.example:after{position:absolute;}) 和直接将其插入类本身(.example{position:absolute;}) 之间有什么区别?我不太理解这个概念。
这确实很令人困惑,但确实存在区别。
::before
和::after
都被称为伪元素,因为它们本身是独立的元素,但与它们所附加的元素直接相关。换句话说,
.my-class::after
非常像.my-class
这样的元素,并且可以与之独立进行样式设置。Chris 有一篇关于它们如何工作以及您可以使用它们做的一些有趣的事情的旧文章:https://css-tricks.org.cn/pseudo-element-roundup/它不适用于
标签。
它适用于吗?
是的,可以。像这样:
a::before {
content: "";
/* 其他属性 */
}
*,
*:before,
*:after {
}
这是什么意思?
它选择了所有元素的 before/after 伪元素。* 表示“任何标签”。
::selection 在哪里?
这不起作用
body :not(i, [class=-icon], [class*=dashicons], ::before, ::after)
font-family: $font-family !important
…但这有效
body :not(i, [class=-icon], [class=dashicons]),
body:not()::before,
body:not(*)::after
font-family: $font-family !important
请将其添加到您的文章中,因为没有关于此问题的文章。