Verwenden von CSS zum Einfügen von Text

Ich bin relativ neu in CSS und habe es verwendet, um den Stil und die Formatierung von Text zu ändern.

Ich möchte es jetzt verwenden, um Text wie unten gezeigt einzufügen:

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

Was ich hoffentlich zeigen konnte als:

Joes Aufgabe: Alle Einträge abgleichen

Das heißt, einfach weil ich der Klasse "Besitzer Joe" angehöre, möchte ich, dass der Text Joe's Task:angezeigt wird.

Ich könnte es mit Code machen wie:

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

Aber das scheint schrecklich überflüssig, sowohl die Klasse als auch den Text anzugeben.

Kann ich tun, wonach ich suche?

BEARBEITEN Eine Idee ist, zu versuchen, es als ListItem einzurichten, <li>wobei das "Aufzählungszeichen" der Text "Joes Aufgabe" ist. Ich sehe Beispiele, wie verschiedene Aufzählungsstile und sogar Bilder für Aufzählungszeichen festgelegt werden. Ist es möglich, einen kleinen Textblock für das List-Bullet zu verwenden?

Es ist, erfordert aber einen CSS2-fähigen Browser (alle gängigen Browser, IE8 +).

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

Aber ich würde eher empfehlen, dafür Javascript zu verwenden. Mit jQuery:

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

Die Antwort mit jQuery, die jeder zu mögen scheint, hat einen großen Fehler, nämlich, dass sie nicht skalierbar ist (zumindest nicht so, wie sie geschrieben steht). Ich denke, Martin Hansen hat die richtige Idee, nämlich HTML5- data-*Attribute zu verwenden. Und Sie können den Apostroph sogar richtig verwenden:

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

Ausgabe:

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

Überprüfen Sie auch die attr () - Funktion des CSS-Inhaltsattributs. Es gibt ein bestimmtes Attribut des Elements als Textknoten aus. Verwenden Sie es so:

<div class="Owner Joe" />

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

Oder sogar mit den neuen benutzerdefinierten HTML5-Datenattributen:

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

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

Codieren Sie es einfach so:

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