Использование CSS для вставки текста

Я относительно новичок в CSS, и использовал его, чтобы изменить стиль и форматирование текста.

Теперь я хотел бы использовать его для вставки текста, как показано ниже:

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

Который, я надеюсь, я смог показать как:

Задача Джо: примирить все записи

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

Я мог бы сделать это с помощью кода:

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

Но это кажется излишне избыточным как для указания класса, так и для текста.

Можно ли сделать то, что я ищу?

РЕДАКТИРОВАТЬ Одна идея состоит в том, чтобы попытаться установить его как ListItem, <li>где «bullet» - это текст «Joe's Task». Я вижу примеры того, как установить различные стили пуль и даже изображения для пуль. Можно ли использовать небольшой блок текста для списка-маркера?

Это так, но требуется браузер с поддержкой CSS2 (все основные браузеры, IE8 +).

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

Но я бы рекомендовал использовать для этого Javascript. С помощью jQuery:

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

Ответ с использованием jQuery, который всем нравится, имеет большой недостаток, который заключается в том, что он не масштабируется (по крайней мере, как написано). Я думаю, что у Мартина Хансена правильная идея - использовать HTML5data-* атрибуты . И вы даже можете использовать апостроф правильно:

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