我对 CSS 比较陌生，并且使用它来更改文本的样式和格式。
我现在想用它来插入文本，如下所示：
<span class="OwnerJoe">reconcile all entries</span>
我希望我可以展示为：
Joe 的任务：核对所有条目
也就是说，仅仅由于属于“Owner Joe”类，我希望显示文本 Joe's Task:。
我可以用如下代码做到这一点：
<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.
但这对于指定类和文本来说似乎是非常多余的。
有可能做我正在寻找的吗？
编辑 一个想法是尝试将其设置为 ListItem <li>，其中“项目符号”是文本“Joe 的任务”。我看到了如何设置各种子弹样式甚至子弹图像的示例。是否可以为列表项目符号使用一小段文本？
label.required:before {content: "* ";} 在必填字段前面添加一个星号。
可以，但需要支持 CSS2 的浏览器（所有主流浏览器，IE8+）。
.OwnerJoe:before {
content: "Joe's Task: ";
}
但我宁愿推荐为此使用 Javascript。使用 jQuery：
$('.OwnerJoe').each(function() {
$(this).before($('<span>').text("Joe's Task: "));
});
每个人似乎都喜欢的使用 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
另请查看 CSS 内容属性的 attr() 函数。它将元素的给定属性输出为文本节点。像这样使用它：
<div class="Owner Joe" />
div:before {
content: attr(class);
}
甚至使用新的 HTML5 自定义数据属性：
<div data-employeename="Owner Joe" />
div:before {
content: attr(data-employeename);
}
div[data-employeename]:before。
只需像这样编码：
.OwnerJoe {
//other things here
&:before{
content: "Joe's Task: ";
}
}
我知道这是一个老问题，但我想更新 CSS3 的答案。问题是伪类或伪元素。
CSS2 方式 (pseudo-class)
.OwnerJoe:before {
content: "Joe's Task:";
}
CSS3 way (pseudo-element) 注意双冒号
.OwnerJoe::before {
content: "Joe's Task:";
}
关注公众号
不定期副业成功案例分享
.OwnerJoe:before和.OwnerJoe::before