CSS：在不向某些元素添加内容之后 | 在不向某些元素添加内容之后

本文介绍了CSS：在不向某些元素添加内容之后的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法理解CSS

：

使用 span：before， span：after 后，DOM如下所示：

 < span>< before> ; / before> span的内容< after>< / after>< / span>

显然，这不能使用< img src = /> 。

I'm having trouble understanding the behavior of the CSS :after property. According to the spec (here and here):

This doesn't seem to place restrictions on which elements can have a :after (or :before) property. However, it seems to only work with specific elements... <p> works, <img> doesn't, <input> doesn't, <table> does. I'm could test more, but the point is made. Note that this seems pretty consistent across browsers. What determines whether an object can accept a :before and :after property?

解决方案

img and input are both replaced elements.

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

From the spec:

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="" />.

这篇关于CSS：在不向某些元素添加内容之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！