当前位置：文江博客话题详情

CSS：未向某些元素添加内容之后

发布于 2024-11-28 03:35:42 字数 675 浏览 1 评论 0原文

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

正如其名称所示，:before 和 :after 伪元素指定元素的文档树内容之前和之后的内容位置。

这似乎并没有限制哪些元素可以具有 :after （或 :before）属性。然而，它似乎只适用于特定元素...

有效，不会，不会，

会。我可以测试更多，但重点已经明确。请注意，这在各个浏览器中似乎非常一致。 什么决定了对象是否可以接受 :before 和 :after 属性？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薯片软お妹 2024-12-05 03:35:43

没有结束标签的元素是 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%);
    }
  }
}

Elements that doesn't have closing tag are void elements and they can't display content inside them:

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

All Blink, Webkit and Quantum browsers allow you to create pseudo elements only on checkboxes but this is controversial since no spec allow this behavior.

Here an example:
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%);
    }
  }
}

回复收藏 0 原文

小苏打饼 2024-12-05 03:35:42

img 和 input 都是替换元素。

替换元素是其外观和尺寸为的任何元素
由外部资源定义。示例包括图像（标签）、
插件（

:before 和 :after 仅适用于非替换元素。

来自规范：

注意。该规范没有完全定义交互
:before 和 :after 以及替换的元素（例如 HTML 中的 IMG）。这
将在未来的规范中更详细地定义。

使用 span:before、span:after 时，DOM 如下所示：

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

显然，这不适用于。

img and input are both replaced elements.

A replaced element is any element whose appearance and dimensions are
defined by an external resource. Examples include images (<img> tags),
plugins (<object> tags), and form elements (<button>, <textarea>,
<input>, and <select> tags). All other elements types can be referred
to as non-replaced elements.

:before and :after only work with non-replaced elements.

From the spec:

Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.

With span:before, span:after, the DOM looks like this:

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

Evidently, that won't work with <img src="" />.

回复收藏 0 原文

奈何桥上唱咆哮 2024-12-05 03:35:42

:before 和 :after 并不是必需的对于替换的元素起作用，并且 CSS 规范没有指定它们如何为它们工作，并且替换元素的概念有些模糊。

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

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

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

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

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

总而言之，:after 和 :before 目前不适用于空元素（除了 < code>hr），但这主要是由于实现而导致的，并且将来可能会发生变化。

:before and :after are not required to work for replaced elements, and CSS specifications do not specify how they would work for them, and the concept of replaced element is somewhat vague.

The CSS 2.1 specification clearly suggests that they can work for replaced elements, just saying that it does not “fully define” how. This relates to the issue that a replaced element is expected to have its own visual rendering, which is not controlled by CSS, whereas the pseudo-elements should add something to the content of the element. The spec adds that this will be defined “in more detail” in a future specification, but this has not taken place so far.

Browser vendors just decided to avoid problems by not implementing these pseudo-elements for some elements at all.

It is not clear at all what “replaced element” means, and the meaning appears to have changed somewhat. It is often interpreted as meaning the same as empty element (an element with EMPTY declared content, i.e. an element that cannot have any content), but CSS 2.1 itself shows a sample style sheet with the selector br:before (though browsers have ignored this, implementing br their own way). It can be argued that more and more elements have moved into the scope of CSS rendering, at least in part. For example, an input element (incuding its font, colors, etc.) is largely controllable with CSS in modern browsers.

Current browsers (Firefox, IE, Chrome) do not seem to support the :after and :before pseudo-elements for empty elements other than hr. For hr, IE and Chrome place the generated content inside a bordered box, which is the implementation of hr; the content makes the box taller. Firefox places the content of both (!) pseudo-elements after the horizontal rule that is its implementation of hr. This variation illustrates the kinds of “interaction” problems that are referred to in CSS 2.1.

It is often claimed that these pseudo-elements cannot be used for empty elements since their HTML definitions do not allow any content. This is a category error. The syntax rules of a markup language do not restrict what you can do in CSS

To conclude, :after and :before are currently not usable for empty elements (except marginally for hr), but this is mainly due to implementations and may change in the future.

回复收藏 0 原文

半岛未凉 2024-12-05 03:35:42

;是一个被替换的元素，如果图像加载失败，则在其上使用 :before 或 :after 伪元素可以工作，否则它不起作用。如果您打算在图像加载失败时进行后备，则以下 css 很有用：

img{ 
position: relative;
}

img:after{ 
position: absolute;
content: "Any allowed type of content including a fallback image";
left: 0;    
}

有关一个很好的示例，请参阅 https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/

<img> is a replaced element and using :before or :after pseudo-elements on it works if the image fails to load and otherwise it does not work. If you intend to have a fallback in case of image load failure, the following css useful:

img{ 
position: relative;
}

img:after{ 
position: absolute;
content: "Any allowed type of content including a fallback image";
left: 0;    
}

For a good example, please refer to https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/

回复收藏 0 原文

如果没有你 2024-12-05 03:35:42

我花了几个小时拔掉头发，结果发现其他一些 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 和垃圾邮件 stronger 选择器和 !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>

I've spent several hours plucking out my hair only to find that some other css override content (or display:none) property of my selector.

For example, if the following code is written in some other place, before or after element will never show:

#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>

Just find the css which is overwriting your style and spam stronger selectors and !important to make it work

#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>

回复收藏 0 原文

~没有更多了~