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

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
  }
}