使用CSS插入文本

Question

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

我现在想用它来插入文本,如下所示:

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

我希望我可以表现为:

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

你为什么宁愿推荐使用Javascript？ (14认同)
为了覆盖旧的IE,您可以有条件地包含http://code.google.com/p/ie7-js/,这将允许您的CSS对所有浏览器保持不变.它是jQuery的替代品,更接近标准. (8认同)
如果给出了DOCTYPE,这将适用于IE8 +. (7认同)
初步测试表明内容属性运行良好.当其他人都说无法完成时,恭喜找到答案.:) (6认同)
结肠后应该是一个空格. (4认同)
有趣：似乎可以使用一两个冒号，例如 `.OwnerJoe:before` 和 `.OwnerJoe::before` (2认同)

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);
}

那是一个更好的主意-我讨厌创建一个CSS类来显示内容的主意。最终可能会基于sql查询动态生成css。我将选择器替换为div [data-employeename]：before。 (2认同)

Answer 4

我知道这是一个老问题，但我想更新 CSS3 的答案。问题是伪类或伪元素。

CSS2方式（伪类）

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

CSS3方式（伪元素）注意双冒号

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

Answer 5

像这样编码：

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}