Używanie CSS do wstawiania tekstu

Jestem stosunkowo nowy w CSS i wykorzystałem go do zmiany stylu i formatowania tekstu.

Chciałbym teraz użyć go do wstawienia tekstu, jak pokazano poniżej:

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

Mam nadzieję, że uda mi się to pokazać jako:

Zadanie Joe: uzgadnij wszystkie wpisy

To znaczy, po prostu dlatego, że należę do klasy „Owner Joe”, chcę, aby tekst Joe's Task:był wyświetlany.

Mógłbym to zrobić za pomocą kodu takiego jak:

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

Ale wydaje się to okropnie zbędne zarówno dla określenia klasy, jak i tekstu.

Czy można zrobić to, czego szukam?

EDYCJA Jednym z pomysłów jest próba ustawienia go jako ListItem, <li>gdzie „kula” to tekst „Zadanie Joe”. Widzę przykłady ustawiania różnych stylów pocisków, a nawet obrazów dla pocisków. Czy do wypunktowania listy można użyć małego bloku tekstu?

Jest, ale wymaga przeglądarki obsługującej CSS2 (wszystkie główne przeglądarki, IE8 +).

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

Ale wolałbym w tym celu używać Javascript. Z jQuery:

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

Odpowiedź przy użyciu jQuery, którą wszyscy lubią, ma poważną wadę, polegającą na tym, że nie jest skalowalna (przynajmniej tak, jak jest napisana). Myślę, że Martin Hansen ma właściwy pomysł, który polega na użyciu data-*atrybutów HTML5 . I możesz nawet poprawnie używać apostrofu:

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

wynik:

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

Sprawdź także funkcję attr () atrybutu treści CSS. Wysyła dany atrybut elementu jako węzeł tekstowy. Używaj go w ten sposób:

<div class="Owner Joe" />

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

Lub nawet z nowymi niestandardowymi atrybutami danych HTML5:

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

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

Po prostu napisz to w następujący sposób:

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