Psuedo-Elements, jQuery - Add Brackets to text on hover

Psuedo-Elements, jQuery - Add Brackets to text on hover

by Nirvanachain

HTML

<div class="item">One</div>
<br />
<div class="item">Two</div>

CSS

.on {
    background-color:#FF0000;
    width:7%;
}
.on:before {
    content: '[';
}

.on:after {
    content: ']';
}

JavaScript

$(".item").each(function(){

    $(this).hover(
    
        function () {
            $(this).addClass('on');
        },
        
        function () {
            $(this).removeClass('on');   
        }

    );
    
});