Utiliser CSS pour insérer du texte

Je suis relativement nouveau en CSS et je l'ai utilisé pour changer le style et la mise en forme du texte.

Je voudrais maintenant l'utiliser pour insérer du texte comme indiqué ci-dessous:

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

Ce que j'espère pouvoir montrer comme:

Tâche de Joe: réconcilier toutes les entrées

Autrement dit, simplement parce que je suis de la classe "Owner Joe", je veux que le texte Joe's Task:soit affiché.

Je pourrais le faire avec du code comme:

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

Mais cela semble terriblement redondant pour spécifier à la fois la classe et le texte.

Est-il possible de faire ce que je recherche?

EDIT Une idée est d'essayer de le configurer en tant que ListItem <li>où la "puce" est le texte "Joe's Task". Je vois des exemples de la façon de définir différents styles de puces et même des images pour les balles. Est-il possible d'utiliser un petit bloc de texte pour la liste-puce?

Il l'est, mais nécessite un navigateur compatible CSS2 (tous les principaux navigateurs, IE8 +).

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

Mais je recommanderais plutôt d'utiliser Javascript pour cela. Avec jQuery:

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

La réponse en utilisant jQuery que tout le monde semble aimer a un défaut majeur, qui n'est pas évolutif (du moins tel qu'il est écrit). Je pense que Martin Hansen a la bonne idée, qui est d'utiliser des data-*attributs HTML5 . Et vous pouvez même utiliser correctement l'apostrophe:

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

production:

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

Consultez également la fonction attr () de l'attribut de contenu CSS. Il génère un attribut donné de l'élément en tant que nœud de texte. Utilisez-le comme ceci:

<div class="Owner Joe" />

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

Ou même avec les nouveaux attributs de données personnalisés HTML5:

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

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

Il suffit de le coder comme ceci:

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