使用CSS来插入文本
我相对较新的CSS，并用它来改变文本的风格和格式。
我现在想用它来插入文本，如下所示：
<span class="OwnerJoe">reconcile all entries</span> 我希望我可以展示为：
乔的任务：协调所有条目
也就是说，简单地凭借“所有者乔”类，我想要显示文本Joe's Task: 。
我可以用代码来做到这一点：
<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.
但是，对于指定类和文本来说，这似乎是非常多余的。
有可能做我想找的东西吗？
编辑一个想法是尝试将其设置为一个ListItem <li>其中“子弹”是文本“乔的任务”。 我看到如何设置各种子弹样式，甚至子弹图像的例子。 列表中是否可以使用一小段文本？
这是，但需要一个CSS2function的浏览器（所有主stream浏览器，IE8 +）。
.OwnerJoe:before { content: "Joe's Task:"; }
但我宁愿推荐使用Javascript。 使用jQuery：
$('.OwnerJoe').each(function() { $(this).before($('<span>').text("Joe's Task: ")); });
每个人似乎都喜欢使用jQuery的答案有一个主要的缺陷，这是不可扩展的（至less如它所写）。 我认为Martin Hansen有正确的想法，即使用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)"'s task - " ; } div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; } output: Joe's task - mop kitchen Charles' task - vacuum hallway
同时检查CSS内容属性的attr（）函数。 它将元素的给定属性作为文本节点输出。 像这样使用它：
<div class="Owner Joe" /> div:before { content: attr(class); }
甚至是新的HTML5自定义数据属性：
<div data-employeename="Owner Joe" /> div:before { content: attr(data-employeename); }
只需要像这样编码：
.OwnerJoe { //other things here &:before{ content: "Joe's Task: "; } }
这更像是一种模仿的东西，而不是一个造型的东西。
在对数据模型应用视图时进行模板化。
结帐小胡子 。
这是最简单的方法吗？
$('.OwnerJoe').prepend("Joe's Task: ");
