::before / ::after

Avatar of Sara Cope
Sara Cope

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 形式插入图像(设置 widthheight,甚至可以调整 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,其中包含更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
429123.1

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
1271272.13.2

使用 ::beforeafter 的技巧

更多信息