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>
Que espero poder mostrar como:
La tarea de Joe: conciliar todas las entradas
Es decir, simplemente por ser de la clase "Propietario Joe", quiero Joe's Task:que se muestre el texto.
Podría hacerlo con código como:
<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.
Pero parece tremendamente redundante 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" sea 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 con viñetas?
Lo es, pero requiere un navegador compatible con CSS2 (todos los navegadores principales, IE8+).
.OwnerJoe:before {
content: "Joe's Task: ";
}
Pero prefiero recomendar el uso de Javascript para esto. Con jQuery:
$('.OwnerJoe').each(function() {
$(this).before($('<span>').text("Joe's Task: "));
});
La respuesta usando jQuery que a todos parece gustarles tiene un defecto importante, que es que no es escalable (al menos tal como está escrito). Creo que Martin Hansen tiene la idea correcta: utilizar data-*atributos HTML5. E incluso puedes utilizar 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 - " ; }
producción:
Joe's task - mop kitchen
Charles' task - vacuum hallway
Consulte también la función attr() del atributo de contenido CSS. Genera un atributo determinado 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);
}
Sé que esta es una pregunta antigua, pero me gustaría actualizar la respuesta a CSS3. La pregunta es una pseudoclase o un pseudoelemento.
Modo CSS2 ( pseudoclase )
.OwnerJoe:before {
content: "Joe's Task:";
}
Forma CSS3 ( pseudoelemento ) Tenga en cuenta los dos puntos dobles
.OwnerJoe::before {
content: "Joe's Task:";
}
