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