IMG标签与before,after伪类

姚高爽
2023-12-01

在CSS中总有一些你不用不知道,用到才知道的“坑”。比如今天要谈的,把 before, after 伪类用在 <img> 标签上。
嗯,实际上你用你会发现,在大多数浏览器这是无效的,dom中并不会出现你想要的结果。
为什么会这样呢?
让我们回归到 W3C 标准中寻觅一下,在标准中,before, after 伪类的定义如:

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
来自 https://www.w3.org/TR/CSS21/generate.html#before-after-content

我们应该注意到所谓 document tree content,对于 img 这种自闭和标签,似乎不存在 content (内容或后代元素)在标签中,所以选择器没有生效。但这样的解释还不够清晰,实际上标准中还有一行注释:

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.

嗯,这回清楚了,对于可替换元素(如 img、input、select 等),标准并没有清晰定义,这也导致了浏览器实现的差异性。
有解决办法么?搜了一下是有的(http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements):

  1. 使用jQuery

    使用 jQuery 的 before,after 方法:

    javascript
    $('.target').after('<img src="..." />');


    实际上,jQuery 只是在目标元素前后插入 dom 而已。

  2. 伪造 content

给 img 这类标签添加 content 属性,输入一些无意义的文本,让浏览器认为标签含有 content。
如在 CSS 中添加:

css
img {
/ hide the default image /
height:0;
width:0;
/ hide fake content /
font-size:0;
color:transparent;
/ enable absolute position for pseudo elements /
position:relative;
/ and this is just fake content /
content:"I'm just fake content";
}


但这种方法存在浏览器兼容问题。

所以最后还是建议不要做这种尝试了,给父标签添加伪类吧。

 

 类似资料: