如何在 :before 或 :after 偽元素中使用 SVG？

:before 和 :after 偽元素用於在 HTML 元素的起始處和結束處新增內容。這些偽選擇器有助於在不使用 HTML DOM 中不必要的元素的情況下新增內容或其他效果。您可以使用這些選擇器在元素上新增內容或任何顏色和 CSS 效果。顧名思義，:before 選擇器將在元素之前新增內容，而 :after 元素將在元素之後新增內容。

您可以使用這些選擇器新增任何影像、顏色、背景效果等。在本文中，我們將使用這些選擇器在元素之前和之後新增 SVG 影像。這可以透過以下兩種方式實現：

  • 使用這些選擇器的 content 屬性。

  • 使用 CSS 的 background-image 屬性。

現在讓我們詳細討論這些方法，併為每種方法提供不同的程式碼示例。

使用 content 屬性

content 屬性是 CSS 屬性，用於向 HTML 元素新增任何型別的內容。我們可以使用此屬性在使用 :before 和 :after 偽選擇器時在元素之前和之後新增 SVG 影像內容。

語法

下面的語法將顯示如何在偽選擇器中使用 content 屬性新增任何型別的內容：

htmlElement:before / :after{
   content: "write your content";
}

現在讓我們透過在程式碼示例中實際實現它來了解如何在 HTML 元素之前和之後使用這些選擇器新增 SVG。

步驟

  • 步驟 1 - 在第一步中，我們將定義一個 HTML 元素，並使用 CSS 屬性在其前後新增內容。

  • 步驟 2 - 在這一步中，我們將為 HTML 元素分配一個類，該類將用於選擇元素並新增前後內容。

  • 步驟 3 - 在最後一步中，我們將選擇 HTML 元素，並使用偽選擇器在元素之前和之後新增 SVG 影像。

示例

下面的示例將演示如何在 HTML 元素之前和之後使用 content 屬性新增 SVG：

<!DOCTYPE html>
<html lang = "en">
<head>
   <style>
      .result:before{
         content: url('https://tutorialspoint.tw/html5/src/svg/extensions/imagelib/smiley.svg');
         zoom: 20%;
      }
      .result:after{
         content: url('https://tutorialspoint.tw/html5/src/svg/extensions/imagelib/smiley.svg');
         zoom: 20%;
      }
   </style>
</head>
<body>
   <center>
      <h2>Use SVG with :before or :after pseudo element</h2>
      <p>The SVG images before and after the below element are added using the :before and :after pseudo elements.</p>   
      <p class = "result">Smily emoji before and after this content added using the <b> content </b> property.</p>
   </center> 
</body>
</html>

在上面的示例中，我們在偽選擇器元素內使用了 content 屬性，在 HTML 元素的實際文字內容之前和之後添加了 SVG 影像。這是使用帶有 :before 和 :after 偽元素的 SVG 的第一種方法。

使用 background-image 屬性

background-image 屬性用於向 HTML 元素新增一個或多個背景影像。我們可以使用此屬性將 SVG 影像作為 :before 和 :after 偽元素的背景影像新增到 HTML 元素之前和之後。

語法

下面的語法將顯示如何使用 CSS 的 background-image 屬性向 :before 和 :after 偽元素新增背景影像：

htmlElement:before / :after{
   background-image: url(url of svg image);
}

現在讓我們透過程式碼示例詳細瞭解如何使用 background-image 屬性在元素之前和之後新增內容。

方法

此示例的方法與上一個示例的演算法幾乎相同。您只需要透過將偽元素樣式中的 content 屬性替換為 background-image 屬性和 background-image 屬性的一些輔助屬性來對之前的程式碼進行一些更改。

示例

下面的示例將詳細解釋之前的演算法中的更改以及 background-image 屬性的使用：

<!DOCTYPE html>
<html lang = "en">
<head>
   <style>
      .result:before{
         content: '';
         background-image: url('https://tutorialspoint.tw/html5/src/svg/extensions/imagelib/smiley.svg');
         background-repeat: no-repeat;
         background-position: center center;
         background-size: cover;
         display: inline-flex;
         height: 30px;
         width: 30px;
      }
      .result:after{
         content: '';
         background-image: url('https://tutorialspoint.tw/html5/src/svg/extensions/imagelib/smiley.svg');
         background-repeat: no-repeat;
         background-position: center center;
         background-size: cover;
         display: inline-flex;
         height: 30px;
         width: 30px;
      }
   </style>
</head>
<body>
   <center>
      <h2>Use SVG with :before or :after pseudo element </h2>
      <p>The SVG images before and after the below element are added using the :before and :after pseudo elements.</p>   
      <p class = "result"> Smily emoji before and after this content added using the <b> background-image </b> property.</p>
   </center> 
</body>
</html>

在這個示例中，我們使用了 background-image 屬性將 SVG 影像設定為 :before 和 :after 偽元素的背景。這是除了 content 屬性方法之外的另一種使用 SVG 到 before 和 after 偽元素的方法。

結論

在本文中，我們學習了使用程式碼示例的兩種不同的方法或方法，即如何使用帶有 :before 和 :after 偽元素的 SVG。我們透過使用程式碼示例實際實現它們並瞭解它們的工作原理來詳細討論了這兩種方法。

更新於：2023年11月20日

5000+ 次瀏覽