Javascript Css 之後

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

選擇內容之前的 CSS:: 插入被選元素之前。 CSS:在指定元素之後插入的內容之後。這些選擇器通常用於在段落或鏈接之前或之後添加文本。

在設計網站時,您可以在頁面內容之前或之後添加內容。元素。例如,您可以在列表中的每個項目符號之前添加一個圖像。

這就是:: before 和 after:: 偽 CSS 元素的來源。這些偽元素允許您在之前或之前插入內容在元素的內容之後。

本教程將通過示例討論如何使用:: before 和 after:: 偽元素來裝飾網頁的內容。讀完本教程後,您將成為 CSS 中使用 :: before 和 after:: 偽元素的專家。

CSS 偽元素

一個偽元素element 是一個特殊的關鍵字,它允許您為 CSS 選擇器選擇的元素的特定部分設置樣式。在本文中,我們將偽元素稱為選擇器,因為每個偽元素都是一個選擇器

當您想要在不添加 CSS 或類 ID 到元素。例如,如果您想在網頁上的每個鏈接後添加一個“>”箭頭,則可以使用偽元素。

CSS 提供了多種偽元素。特別是:: first line,:: first-letter,:: before and after::。出於本教程的目的,我們將重點關注最後兩個::::: 之前和之後。

偽元素通常使用冒號 (::) 表示。雖然 CSS3 支持使用單點 (:) 語法來聲明偽元素,但最好使用冒號表示法

這是因為符號冒號用於區分偽類占位符。

CSS::before element pseudo-element

It::before pseudo-l"添加出現在元素之前的內容一個網頁這個元素通常用於在段落之前附加一些文本

::before偽元素的語法是:..

:: before 選擇器後面加上你要加入的元素的名字想應用選擇器

這裡主要是組件前面的::偽元素:

如果您有興趣了解有關選擇器在 CSS 中如何工作的更多信息,閱讀我們的指南 CSS 選擇器

讓我們舉個例子來演示偽元素之前的 :: 是如何工作的。

假設我們想在示例網頁中的每個鏈接之前添加一個表情符號 (Ôîó) 鏈接。我們可以使用以下代碼做到這一點:

我們的代碼返回:

Capture d ` screen從 2020 年 12 月 9 日 08 日 00 月 16 日開始“srcset 數據 =” https://744025.smushcdn.com/1245953/wp-content/uploads/2020/12/Screenshot-da-2020-12-09-08-00 -16- 20x3 .png? 有損 = 1 & strip = 1 & webp = 1 20w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/12/Screenshot-from-2020-12-09-08 - 00-16 .png? 大小 = 234x36 & 有損 = 1 & 條帶 = 1 & webp = 1234W,https://744025.smushcdn.com/1245953/wp-content/uploads/2020/12/Screenshot-from-2020 -12-09-08 -00- 16-385x59.png? 有損 = 1 & 波段 = 1 & webp = 1385w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/12/ screenshot -da-2020-12-09-08- 00 -16.png? 有損 = 1 & 波段 = 1 & webp = 1 455w

我們通過在 CSS 文件中指定內容屬性來做到這一點,如下所示:

content: "Ôîó";

我們的規則添加了一個表情符號鏈接在我們創建的 標記的開頭

屬性“content”的值可以是:.

您不能在 content 屬性中插入 HTML 元素。

CSS::after 偽元素

CSS::after 偽元素允許您在之後立即添加內容網頁上的一個元素。就像選擇器之前的 :::: 一樣,通常用於鏈接或文本段落。

Th p seudo-element:: 的語法在以下內容之後:

: : after 語法與:: before 偽元素的語法相同。:: 接受相同的值之後,我們之前討論過的“內容”屬性

:: after CSS Example

假設您正在為一家名為 Hansons Bakery 的麵包店設計網站上的鏈接元素。這個鏈接應該顯示文本“Go to page Home Hansons Bakery”。我們的鏈接應該被一個1像素寬的純黑色邊框包圍。

在我們的標籤之後我們想要一個文本框顯示內容此頁面我們的烘焙食品菜單。 (注意“This”之前的空格。)我們的盒子應該有一個橙色的 HTML背景色

我們可以使用以下代碼來做到這一點:

我們的代碼生成的內容類似這樣:

< class figure = "wp-bloc-image"> Capture of 2020 12 09 08 00 47 1