CSS :before 和 :after 選擇器可以插入 HTML 內容嗎？

使用CSS :before 和:after 選擇器插入HTML

在CSS 中，:before 和:after 偽元素允許您新增元素之前或之後的任意內容，而不修改其實際內容。然而，注意這種方法的局限性是至關重要的。

挑戰：透過:before 和:after 新增HTML

考慮以下程式碼：

li.first div.se_bizImg:before {
    content: "<h1>6 Businesses Found <span class="headingDetail">(view all)</span>
</h1>";
}

此程式碼片段的目的是使用:before偽元素將HTML 標題插入DOM 中。然而，正如您可能已經意識到的，這段程式碼不起作用。

帶有 :before 和 :after 的內容限制

這裡的關鍵問題在於 content 屬性:before 和 :after 選擇器，只接受文字內容。 HTML 作為標記語言，無法使用此屬性直接插入。

替代方法

要獲得所需的結果，需要替代方法。考慮使用 JavaScript 或 jQuery 直接操作 DOM 並插入 HTML 標記。另一種選擇是使用可以動態產生所需 HTML 的模板引擎。

其他注意事項

• 在程式碼中使用 " inside a " 區塊是不正確的。確保正確嵌套引號 (class='headingDetail')。
• 使用內容新增 HTML 程式碼可能會導致無限循環，其中內容在其自身內遞歸添加。

以上是CSS :before 和 :after 選擇器可以插入 HTML 內容嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！