如何在 :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.com/html5/src/svg/extensions/imagelib/smiley.svg');
         zoom: 20%;
      }
      .result:after{
         content: url('https://tutorialspoint.com/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.com/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.com/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+ 次浏览