使用CSS插入文字

Question

使用CSS插入文字我是CSS的新手，并使用它来更改文本的样式和格式。我现在想用它来插入文本，如下所示：<span class="OwnerJoe">reconcile all entries</span>我希望我能表现为：乔的任务：协调所有条目即，仅由于属于“所有者Joe”类，我希望Joe's Task:显示文本。我可以用类似的代码来做到这一点：<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.但这对于指定类和文本来说似乎是多余的。有可能做我想要的吗？编辑 一个想法是尝试将其设置为ListItem <li>，其中“项目符号”是文本“ Joe's Task”。我看到了如何设置各种项目符号样式甚至项目符号图像的示例。列表项目符号可以使用一小段文字吗？

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 content属性的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: ";

  }

}