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

207

Я относительно новичок в 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». Я вижу примеры того, как установить различные стили пуль и даже изображения для пуль. Можно ли использовать небольшой блок текста для списка-маркера?

abelenky
источник
1
идея <li> не является хорошей практикой. Если вы действительно хотите этого, посмотрите вместо этого на язык шаблонов.
Гэри
1
Похоже, с использованием CSS3: before или: после псевдоэлементов вы действительно просто перенесете избыточность на землю CSS (потому что вам нужно будет добавить инструкцию CSS для OwnerJoe, OwnerJane и т. Д.)
Мэтт Бекман,
2
@Matt Beckman: Это хорошо для меня. Я могу легко определить блоки CSS для каждого из моих пользователей. Повторять это снова и снова в HTML кажется чрезмерным в моем случае.
abelenky
1
Я чувствую, что более практичное использование этого для более широкой аудитории будет похоже label.required:before {content: "* ";}на добавление звездочки перед необходимыми полями, возможно.
Патрик

Ответы:

317

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

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

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

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});
Марсель Джекверт
источник
4
Должен быть пробел после двоеточия.
система PAUSE
7
Начальные тесты показывают, что свойство content работает хорошо. Поздравляю с поиском ответа, когда все остальные говорят, что это невозможно. :)
Абеленки
8
Чтобы охватить более старый IE, вы можете условно включить code.google.com/p/ie7-js , чтобы ваш CSS оставался неизменным для всех браузеров. Это альтернатива jQuery, которая ближе к стандартам.
система PAUSE
15
Почему вы предпочитаете использовать Javascript?
Рикки
Интересно: кажется, работает с одной или двумя двоеточиями, например, .OwnerJoe:beforeи.OwnerJoe::before
г-н Кеннеди
40

Ответ с использованием 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
Джефф
источник
19
Интересный побочный эффект от использования содержимого CSS в отличие от jQuery заключается в том, что текст, предоставленный атрибутом содержимого, не выбирается, что может быть или не быть желательным ....
Джефф
Если текст является частью макета страницы, а не частью контента, возможно, CSS является подходящим местом для этого. Например, если вы хотите, чтобы заголовок вашей страницы на всех страницах был фиолетовым на желто-зеленом фоне «Hello World», это имело бы смысл. Все, что потребуется, чтобы изменить заголовок страницы, - это отредактировать один файл CSS. Если бы у вас был текст в формате HTML, потребовалось бы редактирование каждой страницы вашего сайта и, возможно, внесение изменений в ваши веб-приложения.
августа
28

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

<div class="Owner Joe" />

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

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

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

div:before {
  content: attr(data-employeename);
}
Мартин Хансен
источник
2
Это гораздо лучшая идея - я ненавижу идею создания класса CSS для отображения контента. Это может в конечном итоге генерировать CSS динамически на основе SQL-запроса. Я бы заменил селектор на div[data-employeename]:before.
Johnny5
6

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

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}
BartSabayton
источник
18
Это не правильный CSS, но синтаксис Sass.
Асфанд Кази