html - img 元素上的 :before 和 :after 元素

Question

是否可以在 img 元素上使用伪选择器之前和之后？认为这是但没有任何运气，将css切换到div并且它工作正常。类.page-overhang是 img 元素。

// page overhang mixin
@mixin overhang {
    &:before,
    &:after {
        position: absolute;
        left: 0;
        display: block;
        width: 10px;
        height: 18px;
        background: url(../images/sprite.png) no-repeat;
        content: "";
    }

    &:before {
        top: -18px;
        background-position: 0 -100px;
    }

    &:after {
        bottom: -18px;
        background-position: 0 -119px;
    }
}

/* scss file */
.page-overhang {
    position: relative;
    display: block;
    @include overhang();
}

Answer 1

:before和:after伪元素不能用于void 元素，因为它们指定要附加或附加到元素实际内容的内容，而 void 元素可以没有内容。