更改 CSS 中的內容

1. 使用 :after 偽元素和 display 屬性替換 CSS 中的文字
2. 使用 :before 偽元素和 visibility 屬性替換 CSS 中的文字

本教程將介紹幾種更改或替換 CSS 內容的方法。

使用 :after 偽元素和 display 屬性替換 CSS 中的文字

我們可以使用 CSS 中的偽元素來更改或替換 HTML 中編寫的內容。然後使用 :after 偽元素和 content 屬性來實現我們的目標。

使用 :after 選擇器在所選內容之後附加一些內容。要新增內容，我們使用 content 屬性。

我們可以將所需的內容寫為 content 屬性的值。要替換或更改內容，我們可以隱藏之前寫入的內容並使用 content 屬性，使用 :after 選擇器選擇元素。

此方法將 display 屬性設定為 none 以隱藏先前的文字。

例如，建立一個帶有 text 類的 div。在 div 內，寫一個 span 標籤和 the original text 在 span 內。

在 CSS 中，選擇 span 並將其 display 屬性設定為 none。接下來，使用 :after 選擇器選擇 text 類。

最後，編寫 content 屬性並將其值設定為正文中的 the changed text。

執行以下示例中的程式碼片段時，將顯示更改的文字。在這裡，文字原始文字從文件中刪除，它的行為就像元素不存在一樣。

這是因為 content 屬性的值將佔用它的空間。結果，將顯示新內容。

<div class="text">
<span>the original text</span>
</div>

.text span {
 display: none;
}
.text:after {
 content: 'the changed text';
}

使用 :before 偽元素和 visibility 屬性替換 CSS 中的文字

我們可以使用 CSS 中的 :before 偽元素來更改用 HTML 編寫的內容。 :before 偽元素的工作方式與 :after 偽元素類似，但內容呈現在此處。

使用它將內容寫入所選元素之前。此方法與第一種方法一樣使用 content 屬性。

此外，我們可以使用 visibility 屬性隱藏之前的內容並將其設定為 hidden。

當設定為 hidden 時，visibility 屬性將使內容不可見，但空白區域將顯示在文件中。但是，使用 :before 選擇器將用新內容覆蓋空間。

例如，在第一種方法中使用的示例中，選擇 span 元素並將其 visibility 屬性設定為 hidden。

但是，請記住刪除以前應用的樣式。接下來，使用 :before 選擇器選擇 text 類並編寫新內容，如下例所示。

使用 display:none 隱藏以前的內容。但是，我們不能在使用 :after 選擇器時使用 visibility:hidden，因為隱藏元素的空間將被保留。

<div class="text">
<span>before</span>
</div>

.text span {
 visibility:hidden;
}
.text:before {
 content: 'after';
}