如何使用 CSS 或 JavaScript 在元素之前插入自定义文本？

使用 CSS 创建文本注入

从基本 CSS 过渡到更高级的技术时，很自然地会寻求增强文本呈现的方法。其中一项挑战涉及根据类名称在特定元素之前注入自定义文本。

使用 CSS 插入文本

在您的问题中，您的目标是显示“Joe 的任务： ”在带有“OwnerJoe”类的文本元素之前。传统上，您可以在元素本身中包含文本：

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

但是，当指定类和文本内容时，此方法变得多余。

为了满足您的愿望，CSS 提供了解决方案：

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

此规则指示浏览器在任何带有“OwnerJoe”课程。请注意，这需要兼容 CSS2 的浏览器。

替代方法：JavaScript

虽然 CSS 可以处理此任务，但 JavaScript 提供了更直接的方法，特别是如果您喜欢的话动态文本注入。使用 jQuery：

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

以上是如何使用 CSS 或 JavaScript 在元素之前插入自定义文本？的详细内容。更多信息请关注PHP中文网其他相关文章！