Using CSS to insert text

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 a开发者_开发技巧ll 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?

It is, but requires a CSS2 capable browser (all major browsers, IE8+).

.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: "));
});

The answer using jQuery that everyone seems to like has a major flaw, which is it is not scalable (at least as it is written). I think Martin Hansen has the right idea, which is to use HTML5 data-* attributes. And you can even use the apostrophe correctly:

html:

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

css:

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

output:

Joe's task - mop kitchen
Charles' task - vacuum hallway

Also check out the attr() function of the CSS content attribute. It outputs a given attribute of the element as a text node. Use it like so:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

Or even with the new HTML5 custom data attributes:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

I know this is an old question but I would like to update the answer to CSS3. The question is a pseudo-class or a pseudo-element.

CSS2 way (pseudo-class)

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

CSS3 way (pseudo-element) Note the double colon

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

Just code it like this:

    .OwnerJoe {
      //other things here
      &:before{
        content: "Joe's Task: ";
      }
    }