Utilizzo di CSS per inserire testo

Sono relativamente nuovo al CSS e l'ho usato per cambiare lo stile e la formattazione del testo.

Vorrei ora usarlo per inserire il testo come mostrato di seguito:

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

Che spero di riuscire a mostrare come:

Compito di Joe: riconciliare tutte le voci

Cioè, semplicemente in virtù della classe "Proprietario Joe", voglio che il testo Joe's Task:venga visualizzato.

Potrei farlo con un codice come:

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

Ma ciò sembra terribilmente ridondante sia per specificare la classe che il testo.

È possibile fare quello che sto cercando?

EDIT Un'idea è quella di provare a configurarlo come ListItem in <li>cui il "proiettile" è il testo "Joe's Task". Vedo esempi di come impostare vari stili di proiettile e persino immagini per proiettili. È possibile utilizzare un piccolo blocco di testo per il punto elenco?

Lo è, ma richiede un browser abilitato CSS2 (tutti i principali browser, IE8 +).

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

Ma preferirei usare Javascript per questo. Con jQuery:

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

La risposta che usa jQuery che a tutti sembra piacere ha un grande difetto, che non è scalabile (almeno come è scritto). Penso che Martin Hansen abbia l'idea giusta, ovvero usare HTML5data-* attributi . E puoi anche usare l'apostrofo correttamente:

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 - " ; }

produzione:

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

Controlla anche la funzione attr () dell'attributo del contenuto CSS. Emette un dato attributo dell'elemento come nodo di testo. Usalo così:

<div class="Owner Joe" />

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

O anche con i nuovi attributi di dati personalizzati HTML5:

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

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

Basta codificarlo in questo modo:

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