103

我无法理解 CSS:after属性的行为。根据规范（此处和此处）：

正如它们的名字所表明的，the:before和:after伪元素指定了一个元素的文档树内容之前和之后的内容位置。

这似乎没有限制哪些元素可以具有:after（或:before）属性。但是，它似乎只适用于特定元素......<p>有效，<img>无效，<input>无效，有效<table>。我可以测试更多，但重点是。请注意，这在浏览器中似乎非常一致。什么决定了一个对象是否可以接受一个:before和:after属性？

4

4 回答 4

161

img并且input都是被替换的元素。

替换元素是其外观和尺寸由外部资源定义的任何元素。示例包括图像（<img>标签）、插件（<object>标签）和表单元素（<button>、<textarea>、 <input>和<select>标签）。所有其他元素类型都可以称为不可替换元素。

:before并且:after仅适用于不可替换的元素。

从规格：

笔记。本规范并未完全定义 替换元素（如 HTML 中的 IMG）之间的交互:before以及与替换元素的交互。:after这将在未来的规范中更详细地定义。

使用span:before, span:after，DOM 看起来像这样：

<span><before></before>Content of span<after></after></span>

显然，这不适用于<img src="" />.

于 2011-08-04T22:09:56.363 回答
9

:before并且:after不需要为被替换元素工作，CSS 规范没有指定它们如何为它们工作，并且被替换元素的概念有些模糊。

CSS 2.1 规范清楚地表明它们可以用于替换元素，只是说它没有“完全定义”如何。这涉及到一个被替换的元素应该有自己的视觉渲染，它不受 CSS 控制，而伪元素应该在元素的内容中添加一些东西。该规范补充说，这将在未来的规范中“更详细地”定义，但到目前为止还没有发生。

浏览器供应商只是决定通过根本不为某些元素实现这些伪元素来避免问题。

根本不清楚“替换元素”是什么意思，意思似乎发生了一些变化。它通常被解释为与空元素（具有EMPTY声明内容的元素，即不能有任何内容的元素）的含义相同，但 CSS 2.1 本身显示了带有选择器的示例样式表br:before（尽管浏览器忽略了这一点，实现br了自己的方式）。可以说，越来越多的元素已经进入了 CSS 渲染的范围，至少部分是这样。例如，一个input元素（包括它的字体、颜色等）在现代浏览器中很大程度上可以通过 CSS 进行控制。

:after当前的浏览器（Firefox、IE 、Chrome）似乎不支持:before除hr. 对于hr, IE 和 Chrome 将生成的内容放在一个带边框的框内，这是 ; 的实现hr。内容使盒子更高。Firefox 将两个 (!) 伪元素的内容放在作为其实现的水平规则之后hr。这种变体说明了 CSS 2.1 中提到的“交互”问题的种类。

通常声称这些伪元素不能用于空元素，因为它们的 HTML 定义不允许任何内容。这是一个类别错误。标记语言的语法规则并不限制您在 CSS 中可以做的事情

总而言之，:after并且:before目前不能用于空元素（除了少量用于hr），但这主要是由于实现，并且将来可能会改变。

于 2014-07-11T16:50:32.460 回答
0

我花了几个小时拔头发才发现我的选择器的其他一些 css 覆盖content（或display:none）属性。

例如，如果以下代码写在其他地方，before或者after元素永远不会显示：

#id > child:before {
  content: none!important;
}
<html>
<div id="id" class="class">
  <child>
    Before element is not showing
  </child>

</div>
<style>
  child:before {
    content: 'before';
    color: 'red';
  }
</style>

</html>

只需找到覆盖您的样式和垃圾邮件更强选择器的 css 并!important使其工作

#id>child:before {
  content: none!important;
}
<html>
<div id="id" class="class">
  <child>
    Before element is <strong>showing</strong>
  </child>

</div>
<style>
  #id.class>child:before {
    content: 'before'!important;
    border: 1px solid red;
  }
</style>

</html>

于 2020-11-13T16:19:01.247 回答
-1

没有结束标记的元素是 void 元素，它们不能在其中显示内容：

https://www.w3.org/TR/html5/syntax.html#void-elements

所有 Blink、Webkit 和 Quantum 浏览器都允许您仅在复选框上创建伪元素，但这是有争议的，因为没有规范允许这种行为。

这里是一个例子： https ://codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}
于 2018-08-18T14:52:43.653 回答