：before和：after元素在img元素上 [英] :before and :after elements on an img element

问题描述

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

Is it possible to use before and after psuedo selectors on an img element? Thought it was but not having any luck, switched the css over to a div and it works fine. The .page-overhang class is the img element.

// 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();
}

推荐答案

：之前和：之后伪元素不能用于 void elements ，因为它们指定要添加或附加到元素实际内容的内容，而void元素不能包含任何内容。

:before and :after pseudo-elements cannot be used for void elements, since they specify content to be prepended or appended to the element's actual content, whereas void elements can have no content.

这篇关于：before和：after元素在img元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！