使用CSS插入文本

Question

我对CSS比较陌生，并且用它来改变文本的样式和格式。

我现在想用它来插入文字，如下所示：

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

我希望我可以表现为：

Joe的任务：协调所有条目

也就是说，仅仅因为成为“所有者Joe”这一类，我希望显示文本Joe's Task:。

我可以用以下代码来完成：

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

但是，对于指定类和文本来说，这似乎是多余的。

是否有可能做我正在寻找的事情？

编辑一个想法是尝试将其设置为ListItem <li>，其中“bullet”是文本“Joe的任务”。我看到了如何为子弹设置各种子弹样式甚至图像的示例。是否可以为list-bullet使用一小块文本？

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的答案，每个人似乎都有一个主要缺陷，即它不可扩展（至少在编写时）。我认为Martin Hansen有正确的想法，即使用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

Answer 3

还要检查CSS内容属性的attr（）函数。它将元素的给定属性输出为文本节点。像这样使用它：

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