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

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

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

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

Надеюсь, я смогу показать:

Joe Task: примирить все записи

То есть, просто в силу класса "Owner Joe", я хочу, чтобы текст Joe Task: отображался.

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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

Ответ с использованием jQuery, который, как кажется, кажется, имеет большой недостаток, который не масштабируется (по крайней мере, так как он написан). Я думаю, что у Мартина Хансена есть правильная идея, которая заключается в использовании атрибутов data5 * 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)" task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

output:

Joe task - mop kitchen
Charles' task - vacuum hallway

Ответ 3

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

<div class="Owner Joe" />

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

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

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

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

Ответ 4

Просто введите код так:

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

Ответ 5

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

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

Оформить заказ mustache.

Ответ 6

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

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