10 Feb Add text or graphic before or after an element with CSS or jQuery

CSS Solution

//Be sure to use # for IDs, as in #your-item-id
.your-item-class:before {
	content:'the text or graphic to add here';
	display:inline-block;
	margin-right:.5em;
}
.your-item-class:after {
	content:'the text or graphic to add here';
	display:inline-block;
	margin-left:.5em;
}

jQuery Solution

This is a better solution if the element you’re attaching to is a link. Your appended or prepended item will become part of the link.

//Be sure to use # for IDs, as in #your-item-id
//----add before
$( '.your-item-class' ).prepend("<span class='class-name'>Text here</span>");

//----add after
$( '.your-item-class' ).append("<span class='class-name'>Text here</span>");