CSS gebruiken om tekst in te voegen

Ik ben relatief nieuw in CSS en heb het gebruikt om de stijl en opmaak van tekst te wijzigen.

Ik wil het nu gebruiken om tekst in te voegen zoals hieronder getoond:

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

Wat ik hoop te laten zien als:

Joe’s taak: verzoen alle inzendingen

Dat wil zeggen, simpelweg omdat ik van de klas “Eigenaar Joe” ben, wil ik dat de tekst Joe's Task:wordt weergegeven.

Ik zou het kunnen doen met code als:

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

Maar dat lijkt erg overbodig om zowel de klasse als de tekst te specificeren.

Is het mogelijk om te doen wat ik zoek?

EDITEen idee is om te proberen het in te stellen als een ListItem <li>waarbij de “bullet” de tekst “Joe’s Task” is. Ik zie voorbeelden van het instellen van verschillende stijlen voor opsommingstekens en zelfs afbeeldingen voor opsommingstekens. Is het mogelijk om een klein stukje tekst te gebruiken voor de opsommingslijst?

Antwoord 1, autoriteit 100%

Dat is het, maar vereist een CSS2-compatibele browser (alle belangrijke browsers, IE8+).

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

Maar ik zou hier liever Javascript voor gebruiken. Met jQuery:

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

Antwoord 2, autoriteit 12%

Het antwoord met jQuery dat iedereen leuk lijkt te vinden, heeft een grote fout, namelijk dat het niet schaalbaar is (tenminste zoals het is geschreven). Ik denk dat Martin Hansen het juiste idee heeft, namelijk om HTML5 data-*attributen te gebruiken. En je kunt zelfs de apostrof correct gebruiken:

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

uitvoer:

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

Antwoord 3, autoriteit 9%

Bekijk ook de attr() functie van het CSS content attribuut. Het voert een bepaald attribuut van het element uit als een tekstknooppunt. Gebruik het als volgt:

<div class="Owner Joe" />
div:before {
  content: attr(class);
}

Of zelfs met de nieuwe aangepaste HTML5-gegevenskenmerken:

<div data-employeename="Owner Joe" />
div:before {
  content: attr(data-employeename);
}

Antwoord 4, autoriteit 2%

Codeer het gewoon als volgt:

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