jQuery wrap打破了CSS伪元素

Question

Alright so for a site I am working on I am creating these image piles. I am trying to have so I can just grab an <img> then wrap it with the a div and have the css I set up take care of styling it to give it the image pile effect.

Here is a link to a fiddle . And here is the main part of the code.

(function ($){
    $.fn.ImagePile = function (options) {
        var settings = $.extend({
            pileType: "neat"
        }, options);
        //get pileType from settings
        var pileType = settings.pileType;

        switch(pileType){
            case "neat":
                return this.wrap("<div class='stack neat'></div>");
                break;
        }
    };
})(jQuery);


$("#image1").ImagePile();

Forgot to mention that the problem is the :after element is not showing up where it is supposed to be showing up.

Answer 1

If you're not setting a left or right attribute for the absolutely positioned items, then it defaults to auto which is fine for the :before element but obviously not the :after element.

Just try setting a left or right attribute for the :before and :after in your CSS.

Fiddle: http://jsfiddle.net/39HKr/6/