Using CSS to insert text

Question

I'm relatively new to CSS, and have used it to change the style and formatting of text.

I would now like to use it to insert text as shown below:

<span class="OwnerJoe">reconcile all entries</span>

Which I hope I could get to show as:

Joe's Task: reconcile all entries

That is, simply by virtue of being of class "Owner Joe", I want the text Joe's Task: to be displayed.

I could do it with code like:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

But that seems awfully redundant to both specify the class and the text.

Is it possible to do what I'm looking for?

EDIT One idea is to try to set it up as a ListItem <li> where the "bullet" is the text "Joe's Task". I see examples of how to set various bullet-styles and even images for bullets. Is it possible to use a small block of text for the list-bullet?

Answer 1

This is more a templating thing than a styling thing.

Templating as in applying a view to a data model.

Checkout mustache.

Answer 2

It is, but it won't work in all browsers, especially IE:

.OwnerJoe:before {
  content: "Joe's Task:";
}

But I would rather recommend using Javascript for this. With jQuery:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text('Joe's Task: '));
});

Answer 3

You can't do that with only CSS. Try some jquery (if you can rely on javascript):

html:

<span class="Owner" id="OwnerJoe">reconcile all entries</span>

javascript:

$('.Owner').each(function(){
    var nm = this.id.replace('Owner','');
    $(this).prepend('<span>'+nm+'\'s Task: </span>');
});