Використання CSS для вставки тексту

Я відносно новачок у CSS і використовував його для зміни стилю та форматування тексту.

Тепер я хотів би використовувати його для вставки тексту, як показано нижче:

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

Я сподіваюся, що зможу показати, що:

Завдання Джо: узгодити всі записи

Тобто, просто завдяки класу "Власник Джо", я хочу, щоб текст Joe's Task:відображався.

Я міг би це зробити з таким кодом:

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

Але це видається надзвичайно зайвим як для визначення класу, так і для тексту.

Чи можна робити те, що я шукаю?

EDIT Одна ідея - спробувати встановити його як ListItem, <li>де "куля" - це текст "Завдання Джо". Я бачу приклади того, як встановлювати різні кулі і навіть зображення для куль. Чи можна використовувати невеликий блок тексту для списку-кулі?

Він є, але потрібен браузер, що підтримує CSS2 (усі основні браузери, IE8 +).

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

Але я б скоріше рекомендував використовувати для цього Javascript. За допомогою jQuery:

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

Відповідь, що використовує jQuery, який, як видається, всім подобається, має головний недолік, який не є масштабованим (принаймні, як написано). Я думаю, що у Мартіна Хансена є правильна ідея - використовувати data-*атрибути HTML5 . І ви навіть можете правильно використати апостроф:

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

вихід:

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

Також перевірте функцію attr () атрибута вмісту CSS. Він виводить заданий атрибут елемента як текстовий вузол. Використовуйте його так:

<div class="Owner Joe" />

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

Або навіть з новими спеціальними атрибутами даних HTML5:

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

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

Просто кодуйте це так:

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