img标签使用after和before伪元素失效

最新推荐文章于 2024-05-27 14:51:30 发布
最新推荐文章于 2024-05-27 14:51:30 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41017246/article/details/106329219
版权

https://www.w3.org/TR/CSS21/generate.html#before-after-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.

 

w3c上解析到：对于可替换元素，如img，暂时是不支持用after和before伪元素的

进击的心
关注
专栏目录
css伪元素after、before
kingAn123的博客
04-10 1276
此前，我使用伪类基本上只用到了:first-child和:last-child，来给遍历的列表标签去除最后一项的分割线和边距样式之类的。 因为我尽量避免使用浮动，所以也没有常使用伪类来去除浮动。 最近做一个头像列表的时候发现，用伪元素:after或者:before意外的好用。 效果如图： 文章目录@[toc]一、概念二、应用三、after、before的坑1、伪元素添加图片2、苹果端伪元素不生...
伪元素::after和::before的”前世今生“
stephenli300203的博客
03-23 308
序言 在做前端页面时，需要做一些样式上的改变，使用伪元素很轻易就做到了。之前一直说伪元素还可以清除浮动，然后就想了解一下这东西到底能干什么。如下图，之前碰到的，为元素添加边框样式，小程序中修改radio,checkbox的默认样式，都用到了伪元素。 接下来，我们详细了解一下css中的伪元素 伪元素 css3为了区分伪类和伪类元素，伪元素采用了双冒号的写法。 常见伪类::hover，:link，:...
IMG标签与before,after伪类
weixin_33881140的博客
08-05 684
在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。为什么会这样呢？让我们回归到 W3C 标准中寻觅一下，在标准中，before, after 伪类的定义如： As their names indicate, the :b...
css伪元素:before和:after用法以及在img中使用失效问题
D浩DzD的博客
10-14 1573
伪元素是一个附加至css选择器末的关键词，允许你对被选择元素的特定部分修改样式。 例如：使用伪元素after在类选择器box内容后面添加一些内容 页面显示： 在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。 简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 < iframe > 元素，可能具有自
img标签添加::before ::after 伪元素无效，伪元素增加:hover伪类无效
最新发布
无心使然云中漫步
05-27 1364
## 1 问题 - img标签添加::before ::after 伪元素无效 - 伪元素增加:hover伪类无效 ## 2 解决 - 只能在img前后增加dom元素 - 可以这样写:hover::before{} :hover::after{}
before、after伪类用在＜img＞标签上失效的问题
qq_41161604的博客
06-04 1466
参考链接 https://www.w3.org/TR/CSS21/generate.html#before-after-content 问题 before、after伪类用在标签上失效 原因 before和:after伪元素指定生成内容的样式和位置。正如它们的名称所示，:before和:after伪元素指定了document tree content内容之前和之后的内容位置。content属性与这些伪元素一起指定要插入的内容。 文中的document tree content，对于 img 这种单标签，
html怎么帮图片占位,css 技巧：利用 after 伪对象和 background 属性实现 img 图片标签占位图...
weixin_39732609的博客
05-30 1164
如图：图片加载失败了，在浏览器会默认显示一张破图。受各种网速、浏览器等因素影响，我们无法保证图片能够完全加载成功。加载失败时如何更友好的显示是前端要考虑的主要因素。常见做法都是使用一张默认图代替加载失败的图片，比如一个 logo 、一张主题图片等。做法一使用 JS 懒加载图片，如果图片加载失败，使用一个默认图占位。该插件使用setTimeout监听页面元素是否显示，如果图片出现在显示区域则执行...
给image覆盖水印：after伪元素
_NIXIAKF的博客
10-14 811
使用伪元素给图片加水印；对img标签使用after和before伪元素失效
自学前端第十五天:伪类伪元素和属性选择器和精灵图
weixin_47592060的博客
05-04 690
#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加) 1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已 2.作用:伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。 3.优先级权重:伪类分值和类名选择器一样是0,0,1,0分的,因此a:hover 叠加= 0,0,1,1(很重要!!!) 4.伪类语法结构: ① 类选择器是一个点 比如 .demo {} ②而我们的伪类 用冒号 比如 类 :link{} a { /* a
Typora图片自动编号（导出也生效）
04-29
2. 对img标签使用after和before伪元素失效的原因 - img before - Lioner-CSU的博客 - CSDN博客 3. muggledy/typora-dyzj-theme: Typora主题css样式 - GitHub 通过以上步骤，你可以在Typora中实现图片自动编号，并...
HTML题目
CIA的博客
08-14 4358
1.下列css属性中用于指定内容与边框之间距离为2px的是 A padding:2px B border:2px C margin:2px D content:2px 2.关于CSS控制字体样式说法错误的是 A font:bold 12px “宋体”，指定了字体为加粗的12px大小的宋体 B font-type属性用于指定字体的类型，如宋体、黑体等 C font-size属性用于指定字体的大小 D font-weight属性可指定字体的粗细 3.下面关于vw的描述正确的是 A vw是字号
网站开发进阶(七十一）：css伪元素::before和::after用法详解
IT全栈 华强工作室
05-11 7470
文章目录一、前言二、伪元素::before和::after用法三、::before 和 ::after 特点四、::before 和 ::after 常见使用场景4.1 清除浮动4.2 利用attr()来实现某些动态功能4.3 与counter()结合实现序号问题，而不用使用列表元素4.4 超链接特效4.5 特效使用五、拓展阅读 一、前言 CSS3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类——:hover,:link,:active,:target,:not(),:focus。 常见伪元
CSS 中 ::before 和 ::after 伪元素的几个实际用途
南城
05-29 8540
基于 CSS 中 ::before 和 ::after 伪元素的几个实际场景的运用，文末还有苹果充电线的实现。
img 图片加载错误时显示默认图片
落叶无声的专栏
02-09 2802
有时我们项目里的图片加载错误时（比如 404），为了友好体验，我们可以用一张默认图片来替代。 方法一：用 background 遮住原图片 <img src="no-such-pic.png" /> img { position: relative; height: 200px; width: 200px; } img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height:
css伪元素:before和:after的用法
aliven1的博客
07-03 1521
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。 css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使
伪元素之img标签
三三
10-31 4886
伪元素之 img 标签 CSS伪元素:before :after等是用来添加一些选择器的特殊效果，在实际开发中我们会经常用到。顾名思义，“伪元素”就是伪装的元素，它不是真正的元素却通过样式就能有着和元素一样的表现，我们常见的块级、行块、行内元素大多都是可以设置伪元素的。 我们都知道img元素的外观和尺寸是由外部资源决定的，我们称 替换元素。 jǚ gè lì zi 举个栗子： img{ ...
cssbefore图片大小_css ：after和：before
weixin_39990410的博客
12-21 971
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。举例：1.结合border写个对话框的样式。.test-div{position: relative; /*日常相对定位*/width:150px;height: 36px;border:black 1px solid;border-radius:5px;...
cssbefore图片大小_before伪类插入图片
weixin_39997194的博客
12-21 4713
需求：图片放在div里，原来这种需求最先想到的就是定位，但是如果还有其他定位元素的时候，就很容易相互影响，所以这里尝试一下before伪类来实现样式：.box{width:300px;height:44px;border:1px solid #000;position:relative;}.box:before{content:"";background:url("doorImg2.png") n...
伪元素before和after
04-05
伪元素before和after是CSS中的两个特殊的伪元素，它们可以在元素的内容前或内容后插入一些内容。...注意：伪元素before和after只能用于有内容的元素，比如div、p、span等，不能用于空元素，比如img、input等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值