当前位置: 首页> 教育> 培训 > img标签添加::before ::after 伪元素无效,伪元素增加:hover伪类无效

img标签添加::before ::after 伪元素无效,伪元素增加:hover伪类无效

时间:2025/7/11 19:24:02来源:https://blog.csdn.net/weixin_56624286/article/details/139238060 浏览次数:0次

1 问题

  • img标签添加::before ::after 伪元素无效
  • 伪元素增加:hover伪类无效

2 解决

  • 只能在img前后增加dom元素
  • 可以这样写:hover::before{} :hover::after{}

3 分析

3.1 定义

::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认是行级的。
::after 会创建一个伪元素,作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容。默认情况下,它是行向布局的。

备注: ::before 和 ::after 生成的伪元素是行级盒子,就好像它们是应用它们的元素或“源元素”的直接子元素,因此不能应用于替换元素(如 <img>),它们的内容在不受当前文档样式的影响的情况下被替换。

3.2 可替换元素

在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。

简单来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe> 元素,可能具有自己的样式表,但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。

3.1.1 典型可替换元素
  • <iframe>
  • <video>
  • <embed>
  • <img>
3.1.2 特定情况下被作为可替换元素处理
  • <option>
  • <audio>
  • <canvas>
  • <object>

HTML 规范也说了 <input> 元素可替换,因为 “image” 类型的 <input> 元素就像 <img> 一样被替换。但是其他形式的控制元素,包括其他类型的 <input> 元素,被明确地列为非可替换元素(non-replaced element)。该规范用术语小挂件(Widget)来描述它们默认的限定平台的渲染行为。
用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中,因此是“匿名的”。

详见MDN

4 探索其他伪元素在img上的使用

::selection CSS 伪元素应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)

只有以下css属性,可以在::selection设置

  • color
  • background-color
  • cursor
  • caret-color
  • outline and its longhands
  • text-decoration and its associated properties
  • text-emphasis-color
  • text-shadow
img{&::selection {background-color: orange;}
}

使用::selection之前

在这里插入图片描述

使用::selection之后

在这里插入图片描述

5 其他伪元素

5.1 ::first-letter

选中某块级元素第一行的第一个字母,并且文字所处的行之前没有其他内容

p{&::first-letter {color: orange;font-size:24px}
}

在这里插入图片描述

5.2 ::first-line

在某块级元素的第一行应用样式。第一行的长度取决于很多因素,包括元素宽度,文档宽度和文本的文字大小。

::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个 display 值为 block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中,::first-line 是不起作用的。

p{&::first-line {color: orange;font-size:24px}
}

在这里插入图片描述

关键字:img标签添加::before ::after 伪元素无效,伪元素增加:hover伪类无效

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: