更改 CSS 中的內容

Subodh Poudel 2023年2月20日 2022年4月20日
  1. 使用 :after 偽元素和 display 屬性替換 CSS 中的文字
  2. 使用 :before 偽元素和 visibility 屬性替換 CSS 中的文字
更改 CSS 中的內容

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

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

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

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

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

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

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

在 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';
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn