Usando CSS para insertar texto

Soy relativamente nuevo en CSS y lo he usado para cambiar el estilo y el formato del texto.

Ahora me gustaría usarlo para insertar texto como se muestra a continuación:

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

Lo cual espero poder mostrar como:

Tarea de Joe: conciliar todas las entradas

Es decir, simplemente en virtud de ser de la clase "Propietario Joe", quiero que se muestre el texto Joe's Task:.

Podría hacerlo con un código como:

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

Pero eso parece terriblemente redundante para especificar tanto la clase como el texto.

¿Es posible hacer lo que estoy buscando?

EDITAR Una idea es intentar configurarlo como un ListItem <li>donde la "viñeta" es el texto "Tarea de Joe". Veo ejemplos de cómo configurar varios estilos de viñetas e incluso imágenes para viñetas. ¿Es posible usar un pequeño bloque de texto para la viñeta de lista?

Lo es, pero requiere un navegador compatible con CSS2 (todos los principales navegadores, IE8 +).

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

Pero preferiría usar Javascript para esto. Con jQuery:

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

La respuesta usando jQuery que parece gustar a todos tiene una falla importante, que es que no es escalable (al menos como está escrito). Creo que Martin Hansen tiene la idea correcta, que es utilizar data-*atributos HTML5 . E incluso puedes usar el apóstrofe correctamente:

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

salida:

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

Consulte también la función attr () del atributo de contenido CSS. Produce un atributo dado del elemento como un nodo de texto. Úselo así:

<div class="Owner Joe" />

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

O incluso con los nuevos atributos de datos personalizados HTML5:

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

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

Solo codifícalo así:

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