IMG标签与before,after伪类
在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):
使用jQuery
使用 jQuery 的 before,after 方法:
javascript
$('.target').after('<img src="..." />');
实际上,jQuery 只是在目标元素前后插入 dom 而已。伪造 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伪类的更多相关文章
- 浅析a标签的4个伪类 .
关于伪类,大家最熟悉的还是a标签的4个伪类::link 有链接属性时:visited 链接地址已被访问过:active 被用户激活(在鼠标点击与释放之间发生的事件):hov ...
- a 标签的四个伪类
link 有链接属性时visited 链接地址已被访问过active 被用户激活(在鼠标点击与释放之间发生的事件)hover 其鼠标悬停 <!DOCTYPE ...
- HTML a标签、4个伪类、常用属性(下载)、锚链接(待扩展:邮件、电话、短信、GPS)
HTML 超链接<a> 1.超链接可以是一个字.一个词.一组词.一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 2.当您把鼠标指针移动到网页中的某个链接上时,箭头会 ...
- 【CSS学习笔记】a标签的四种伪类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 对html标签 元素 以及css伪类和伪元素的理解
标签:这应该都知道.<br/> .<a>.<p></p> 等都是标签. 元素:标签开始到结束.比如:<p>p之间的内容</p> ...
- a标签的四个伪类
A标签的css样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :v ...
- img标签的before,after伪类
在CSS中总有一些你不用不知道,用到才知道的“坑”.比如今天要谈的,把 before, after 伪类用在 <img> 标签上.嗯,实际上你用你会发现,在大多数浏览器这是无效的,dom中 ...
- a标签的四个伪类是什么?如何排序?为什么?
爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...
- html中a标签的4个伪类样式
在CSS超链接的属性中,有四个连接方式:a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有些时 ...
随机推荐
- 犯得错误QAQ
1.十年OI一场空,不开longlong见祖宗(丢过150分) 2.计算完了再开数组,开的足足的.不要少开0:(丢过一共200分) 3.最大值,最小值一定开成7个f.(丢了20分). 4.freope ...
- ML理论知识博文列表
一文弄懂神经网络中的反向传播法——BackPropagation:http://www.cnblogs.com/charlotte77/p/5629865.html 人脸识别图库:http://vis ...
- ubuntu下QtCreator启动无响应问题解决
打开Qt后就卡死. 解决方法:删除系统配置目录下的QtProject文件夹: find / -name QtProject 输出: /root/.config/QtProject 删除QtProjec ...
- 洛谷 P1217 [USACO1.5]回文质数 Prime Palindrome
嗯... 这道题对于蒟蒻的我来说实在是TQL... 先看一下题:(题目链接:https://www.luogu.org/problemnew/show/P1217) 然后说一下我的做题过程吧: 一看到 ...
- explian执行计划
MySQL为我们提供了 explain 关键字来直观的查看一条SQL的执行计划. explain显示了MySQL如何使用索引来处理select语句以及连接表,可以帮助选择更好的索引和写出更优化的查询语 ...
- POJ_3069 Saruman's Army 【贪心】
一.题面 POJ3069 二.题意分析 我的理解是,可以在每个点设置一个监测点,能够监测到范围R内的所有其他点,那么问给出N个点的一维位置,需要在其中挑多少个监测点把所有点都监测到. 贪心解决: 1. ...
- linux安装PHP7以及扩展
Linux下安装PHP7 事先升级gcc4.8,然后安装PHP7,安装步骤参考:CentOS安装PHP7 1.Linux下编译的php没有php.ini 解决办法:从源代码目录中复制php.ini-d ...
- 最小生成树的kruskal、prim算法
kruskal算法和prim算法 都说 kruskal是加边法,prim是加点法 这篇解释也不错:这篇 1.kruskal算法 因为是加边法,所以这个方法比较合适稀疏图.要码这个需要先懂并查集.因为我 ...
- java.lang.ref.Reference<T>
//看之前先要知道java里面的四种引用.package com.zby.ref; import sun.misc.Cleaner; /** * 引用对象的抽象基础类.这个类定义了所有引用对象的公共操 ...
- PIE SDK常用滤波
1. 算法功能简介 空间域滤波实在图像空间( x. y)对输入图像应用滤波函数(核.模板)来改进输出图像的处理方法,主要包括平滑和锐化处理,强调像素与其周围相邻像素的关系,常用的方法是卷积运算. 空间 ...