html - img::after 在 src 改变时消失

Question

这是我的 React 代码的一部分

.jsx代码

<img draggable={false} data-score={-1 * score} src={AddressConfig.fileServer + "?id=" + photos} onError={this.onError} style={{display:'inline-block'}}/> 
......
onError = (e) => {
        e.target.src = 'data:image/jpeg;base64,/...........'//valid img url
    }

.css代码

img::after{
        content:attr(data-score);
        display: block;
        position: absolute;
        height: 15px;
        width:15px;
    }

当 onerror 事件没有触发时，一切正常，但是当它触发时，::after 元素将消失。我真的很困惑......

Answer 1

:after 和 :before 不受 img 元素支持。

参见 https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter#Caveats

The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus ::before and ::after don't apply to replaced elements such as img, or to br elements.