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

Question

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

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

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

Что, я надеюсь, я мог бы показать как:

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

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

выход: * +1010 *

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

Answer 3

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

<div class="Owner Joe" />

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

Или даже с новыми пользовательскими атрибутами данных HTML5:

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

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

Answer 4

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

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

Answer 5

Это был бы самый простой способ?

$('.OwnerJoe').prepend("Joe's Task: ");