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

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

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

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

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

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

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

Я мог бы сделать это с Код например:

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

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

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

редактировать одна идея состоит в том, чтобы попытаться настроить его как ListItem <li> где "пуля" - это текст"задача Джо". Я вижу примеры того, как устанавливать различные стили пуль и даже изображения для пуль. Можно ли использовать небольшой блок текста для списка-пуля?

172
css html

6 ответов

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

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

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

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

ответ с использованием 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 - " ; }

выход:

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

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

<div class="Owner Joe" />

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

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

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

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

просто код такой:

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

Это больше шаблонная вещь, чем стильная вещь.

Templating как при применении представления к модели данных.

оформить заказ ус.

1

будет ли это самым простым способом?

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