Utilisation de 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:

reconcile all ensortinges 

Ce que j’espère que je pourrais arriver à montrer comme:

Joe’s Task: réconcilier toutes les entrées

C’est-à-dire simplement en vertu de la classe “Propriétaire Joe”, je veux que le texte Joe's Task: soit affiché.

Je pourrais le faire avec du code comme:

 Joe's Task: reconcile all ensortinges. 

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

Est-il possible de faire ce que je cherche?

EDIT Une idée est d’essayer de le configurer en tant que ListItem

  • où la “puce” est le texte “Joe’s Task”. Je vois des exemples sur la façon de définir différents styles de puces et même des images pour les puces. Est-il possible d’utiliser un petit bloc de texte pour la liste de contrôle?

    C’est le cas, mais nécessite un navigateur compatible CSS2 (tous les principaux navigateurs, IE8 +).

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

    Mais je recommande plutôt d’utiliser Javascript pour cela. Avec jQuery:

     $('.OwnerJoe').each(function() { $(this).before($('').text("Joe's Task: ")); }); 
  • La réponse à jQuery que tout le monde semble aimer a un défaut majeur, à savoir qu’il n’est pas évolutif (du moins tel qu’il est écrit). Je pense que Martin Hansen a la bonne idée, à savoir utiliser les atsortingbuts de data-* HTML5. Et vous pouvez même utiliser l’apostrophe correctement:

    html:

     
    mop kitchen
    vacuum hallway

    css:

     div.task:before { content: attr(data-task-owner)"'s task - " ; } div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; } 

    sortie:

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

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

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

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

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

    Il suffit de le coder comme ceci:

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

    C’est plus une chose de modèle qu’un style.

    Templating comme en appliquant une vue à un modèle de données.

    Checkout moustache .

    Serait-ce le moyen le plus simple?

     $('.OwnerJoe').prepend("Joe's Task: ");