JSFiddle - React, Tailwind, and code Playground

by araque

HTML

<h1>Lista 1: Before</h1>
<ul class="list-1">
    <li id="item-1" class="pseudoelement-before">Item 1</li>
    <li id="item-2" class="pseudoelement-before">Item 2</li>
    <li id="item-3" class="pseudoelement-before">Item 3</li>
</ul>
<h1>Lista 2: After</h1>
<ul class="list-2">
    <li id="item-4" class="pseudoelement-after">Item 4</li>
    <li id="item-5" class="pseudoelement-after">Item 5</li>
    <li id="item-6" class="pseudoelement-after">Item 6</li>
</ul>

<h1>Lista 3: After y Before al mismo tiempo</h1>
<ul class="list-3">
    <li id="item-7" class="pseudoelement-before-after">Item 7</li>
    <li id="item-8" class="pseudoelement-before-after">Item 8</li>
    <li id="item-9" class="pseudoelement-before-after">Item 9</li>
</ul>

CSS

h1 {
    font: 22px helvetica;
    margin-top: 15px;
    margin-bottom: 10px;
}
li {
    border-bottom: 1px solid #999999;
    padding: 6px 0;
    line-height: 14px;
    font: 20px helvetica;
}
/* Lista 1, utilizando before */
ul.list-1 li:before, 
ul.list-1 li[class*="pseudoelement"] .before {
    background: url("http://sopadewebs.com/ejemplos/sprite-pseudoelements/sprite.png") no-repeat scroll 0 0 transparent;
    content: "";
    display: inline-block;
    float: none;
    height: 16px;
    margin-right: 10px;
    width: 19px;
}
#item-1:before, 
#item-1[class*="pseudoelement"] .before {
    background-position: 0 -4px;
}
#item-2:before, 
#item-2[class*="pseudoelement"] .before {
    background-position: 0 -23px;
}
#item-3:before, 
#item-3[class*="pseudoelement"] .before {
    background-position: 0 -45px;
}

/* Lista 2, utilizando after */
ul.list-2 li:after, 
ul.list-2 li[class*="pseudoelement"] .after {
    background: url("http://sopadewebs.com/ejemplos/sprite-pseudoelements/sprite.png") no-repeat scroll 0 0 transparent;
    content: "";
    display: inline-block;
    float: none;
    height: 16px;
    margin-left: 10px;
    width: 19px;
}
#item-4:after, 
#item-4[class*="pseudoelement"] .after {
    background-position: 0 -4px;
}
#item-5:after, 
#item-5[class*="pseudoelement"] .after {
    background-position: 0 -23px;
}
#item-6:after, 
#item-6[class*="pseudoelement"] .after {
    background-position: 0 -45px;
}

/* Lista 3, utilizando after y before al mismo tiempo */
ul.list-3 li:before, 
ul.list-3 li[class*="pseudoelement"] .before,
ul.list-3 li:after, 
ul.list-3 li[class*="pseudoelement"] .after {
    background: url("http://sopadewebs.com/ejemplos/sprite-pseudoelements/sprite.png") no-repeat scroll 0 0 transparent;
    content: "";
    display: inline-block;
    float: none;
    height: 16px;
    margin-right: 10px;
    width: 19px;
}
ul.list-3 li:after, 
ul.list-3 li[class*="pseudoelement"] .after {
    margin-left: 10px;
}
#item-7:before,...

JavaScript

(function($){
    $.fn.pseudoElement = function(options) {
        var gencontentSupported = function() {
            return !($.browser.msie && parseInt($.browser.version) <= 7);
        };     
         
        if ( gencontentSupported() ) return;
            
        var settings = $.extend({}, $.fn.pseudoElement.defaultOptions, options);
        
        return this.each(function() {
            var $$ = $(this),
                alreadyIncluded = ($$.data("pseudo") == true) ? true : false;
                both = ( $$.hasClass(settings.elemClass+"-"+settings.elemClassGeneratedBefore+"-"+settings.elemClassGeneratedAfter) ) ? true : false,
                where = ( $$.hasClass(settings.elemClass+"-"+settings.elemClassGeneratedAfter) ) ? "appendTo" : "prependTo", 
                elemGeneratedClass = ( $$.hasClass(settings.elemClass+"-"+settings.elemClassGeneratedAfter) ) ? settings.elemClassGeneratedAfter : settings.elemClassGeneratedBefore;
            
                if (!alreadyIncluded) {
                    $$.data("pseudo", true);
                    if ( both ) {
                        $(settings.element).addClass(settings.elemClassGeneratedBefore)["prependTo"]($$);
                        $(settings.element).addClass(settings.elemClassGeneratedAfter)["appendTo"]($$);
                    }
                    else {
                        $(settings.element).addClass(elemGeneratedClass)[where]($$);
                    }
                }
        });
    };

    $.fn.pseudoElement.defaultOptions = {
        elemClass: "pseudoelement",
        elemClassGeneratedBefore: "before",
        elemClassGeneratedAfter: "after",
        element: '<span />'
    };
})(jQuery);
$("[class*=pseudoelement]").pseudoElement();