使用CSS插入文本

我对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’s Task”。我看到了如何设置各种子弹样式，甚至为子弹设置图像的例子。是否可以使用一小块文本作为列表子弹?

当前回答

还可以查看CSS内容属性的attr()函数。它将元素的给定属性输出为文本节点。像这样使用它:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

或者使用新的HTML5自定义数据属性:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

其他回答

每个人都喜欢使用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

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

CSS2方式(伪类)

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

CSS3方式(伪元素)注意双冒号

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

还可以查看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: ";
      }
    }

是的，但是需要支持CSS2的浏览器(所有主流浏览器，IE8+)。

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

但我更推荐使用Javascript。jQuery:

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

推荐文章