在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";
}

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

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

转载:https://www.donyell-wang.com/post/codes/imgbiao-qian-yu-before-afterwei-lei

IMG标签与before,after伪类的更多相关文章

  1. 浅析a标签的4个伪类 .

    关于伪类,大家最熟悉的还是a标签的4个伪类::link        有链接属性时:visited    链接地址已被访问过:active     被用户激活(在鼠标点击与释放之间发生的事件):hov ...

  2. a 标签的四个伪类

    link        有链接属性时visited    链接地址已被访问过active     被用户激活(在鼠标点击与释放之间发生的事件)hover      其鼠标悬停 <!DOCTYPE ...

  3. HTML a标签、4个伪类、常用属性(下载)、锚链接(待扩展:邮件、电话、短信、GPS)

    HTML 超链接<a> 1.超链接可以是一个字.一个词.一组词.一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 2.当您把鼠标指针移动到网页中的某个链接上时,箭头会 ...

  4. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  5. 对html标签 元素 以及css伪类和伪元素的理解

    标签:这应该都知道.<br/> .<a>.<p></p> 等都是标签. 元素:标签开始到结束.比如:<p>p之间的内容</p> ...

  6. a标签的四个伪类

    A标签的css样式   CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link    :v ...

  7. img标签的before,after伪类

    在CSS中总有一些你不用不知道,用到才知道的“坑”.比如今天要谈的,把 before, after 伪类用在 <img> 标签上.嗯,实际上你用你会发现,在大多数浏览器这是无效的,dom中 ...

  8. a标签的四个伪类是什么?如何排序?为什么?

    爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...

  9. html中a标签的4个伪类样式

    在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时 ...

随机推荐

  1. 犯得错误QAQ

    1.十年OI一场空,不开longlong见祖宗(丢过150分) 2.计算完了再开数组,开的足足的.不要少开0:(丢过一共200分) 3.最大值,最小值一定开成7个f.(丢了20分). 4.freope ...

  2. ML理论知识博文列表

    一文弄懂神经网络中的反向传播法——BackPropagation:http://www.cnblogs.com/charlotte77/p/5629865.html 人脸识别图库:http://vis ...

  3. ubuntu下QtCreator启动无响应问题解决

    打开Qt后就卡死. 解决方法:删除系统配置目录下的QtProject文件夹: find / -name QtProject 输出: /root/.config/QtProject 删除QtProjec ...

  4. 洛谷 P1217 [USACO1.5]回文质数 Prime Palindrome

    嗯... 这道题对于蒟蒻的我来说实在是TQL... 先看一下题:(题目链接:https://www.luogu.org/problemnew/show/P1217) 然后说一下我的做题过程吧: 一看到 ...

  5. explian执行计划

    MySQL为我们提供了 explain 关键字来直观的查看一条SQL的执行计划. explain显示了MySQL如何使用索引来处理select语句以及连接表,可以帮助选择更好的索引和写出更优化的查询语 ...

  6. POJ_3069 Saruman's Army 【贪心】

    一.题面 POJ3069 二.题意分析 我的理解是,可以在每个点设置一个监测点,能够监测到范围R内的所有其他点,那么问给出N个点的一维位置,需要在其中挑多少个监测点把所有点都监测到. 贪心解决: 1. ...

  7. linux安装PHP7以及扩展

    Linux下安装PHP7 事先升级gcc4.8,然后安装PHP7,安装步骤参考:CentOS安装PHP7 1.Linux下编译的php没有php.ini 解决办法:从源代码目录中复制php.ini-d ...

  8. 最小生成树的kruskal、prim算法

    kruskal算法和prim算法 都说 kruskal是加边法,prim是加点法 这篇解释也不错:这篇 1.kruskal算法 因为是加边法,所以这个方法比较合适稀疏图.要码这个需要先懂并查集.因为我 ...

  9. java.lang.ref.Reference<T>

    //看之前先要知道java里面的四种引用.package com.zby.ref; import sun.misc.Cleaner; /** * 引用对象的抽象基础类.这个类定义了所有引用对象的公共操 ...

  10. PIE SDK常用滤波

    1. 算法功能简介 空间域滤波实在图像空间( x. y)对输入图像应用滤波函数(核.模板)来改进输出图像的处理方法,主要包括平滑和锐化处理,强调像素与其周围相邻像素的关系,常用的方法是卷积运算. 空间 ...