使用 CSS 插入文本

Question

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

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

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

我希望我能展示为：

乔的任务：核对所有条目

也就是说，仅由于属于“Owner Joe”类，我希望显示文本 Joe's Task: 。

我可以用这样的代码来做到这一点：

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

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

有可能做我正在寻找的吗？

编辑 一个想法是尝试将其设置为 ListItem <li> 其中“项目符号”是文本“Joe’s Task”。我看到了如何设置各种项目符号样式甚至项目符号图像的示例。是否可以为列表项目符号使用一小段文本？

原文由 abelenky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它是，但需要支持 CSS2 的浏览器（所有主要浏览器，IE8+）。

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

但我宁愿推荐为此使用 Javascript。使用 jQuery：

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

原文由 Marcel Jackwerth 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议