如何使用 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中文網其他相關文章！