jQuery wrap打破了CSS偽元素

Question

好吧，對於我正在研究的網站，我正在創建這些圖像堆。 我試圖這樣，我可以抓住一個<img>然后用一個div包裝它並讓我設置的css照顧它的樣式給它圖像堆效果。

這是一個小提琴的鏈接。 這是代碼的主要部分。

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

忘記提到問題是:after元素沒有出現在它應該出現的地方之后。

Answer 1

如果你沒有為絕對定位的項設置left或right屬性，那么它默認為auto ，這對於:before元素很好，但顯然不是:after元素。

只需嘗試為CSS中的:before和:after設置left或right屬性。

小提琴： http ： //jsfiddle.net/39HKr/6/