Usando CSS para inserir texto

Sou relativamente novo em CSS e o usei para alterar o estilo e a formatação do texto.

Agora eu gostaria de usá-lo para inserir texto, como mostrado abaixo:

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

Que eu espero poder mostrar como:

Tarefa de Joe: reconciliar todas as entradas

Ou seja, simplesmente por pertencer à classe "Proprietário Joe", quero que o texto Joe's Task:seja exibido.

Eu poderia fazê-lo com código como:

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

Mas isso parece muito redundante para especificar a classe e o texto.

É possível fazer o que estou procurando?

EDIT Uma idéia é tentar configurá-lo como um Item de Lista <li>onde o "marcador" é o texto "Tarefa de Joe". Vejo exemplos de como definir vários estilos de marcadores e até imagens para marcadores. É possível usar um pequeno bloco de texto para o marcador de lista?

É, mas requer um navegador compatível com CSS2 (todos os principais navegadores, IE8 +).

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

Mas eu prefiro usar o Javascript para isso. Com jQuery:

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

A resposta usando jQuery da qual todos parecem gostar tem uma falha importante, que é não ser escalável (pelo menos como está escrita). Eu acho que Martin Hansen tem a idéia certa, que é usar data-*atributos HTML5 . E você pode até usar o apóstrofo corretamente:

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

resultado:

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

Verifique também a função attr () do atributo de conteúdo CSS. Ele gera um determinado atributo do elemento como um nó de texto. Use-o assim:

<div class="Owner Joe" />

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

Ou mesmo com os novos atributos de dados personalizados em HTML5:

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

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

Apenas codifique-o assim:

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