Question

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

Answer 1

: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.