Uso de 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>

Que espero poder mostrar como:

Tarea de Joe: reconciliar todas las entradas

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

Podría hacerlo con código como: 

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

Pero eso parece terriblemente redundante para ambos especificar la clase y el texto.

¿Es posible hacer lo que estoy buscando?

EDIT Una idea es intentar configurarlo como un ListItem <li> donde la "bala" 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 utilizar un pequeño bloque de texto para la lista de viñetas?

 172
csshtml
Author: abelenky, 2010-04-30
Source

6 answers

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

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

Pero preferiría recomendar el uso de Javascript para esto. Con jQuery: 

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});
 276
Author: Marcel Jackwerth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-22 14:43:24

La respuesta que usa jQuery que a todos parece gustarle tiene un defecto importante, que es que no es escalable (al menos tal como está escrito). Creo que Martin Hansen tiene la idea correcta, que es usar atributos HTML5 data-*. E incluso puedes usar el apóstrofo 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
 33
Author: Jeff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-16 22:00:05

También echa un vistazo a la función attr() del atributo CSS content. Muestra un atributo dado del elemento como un nodo de texto. Úsalo 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);
}
 23
Author: Martin Hansen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-10 00:09:50

Simplemente codifícalo así: 

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}
 4
Author: BartSabayton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-12 11:56:29

Esto es más una cosa de plantillas que una cosa de estilo.

Plantillas como en la aplicación de una vista a un modelo de datos.

Checkout bigote.

 1
Author: Gabriel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-04-29 23:13:39

¿Sería ésta la forma más sencilla?

$('.OwnerJoe').prepend("Joe's Task: ");
 -3
Author: GazzaLDN,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-03 15:39:12