如何将 SVG 与：before 或：after 伪元素一起使用？

SEO_juper

于 2023-12-14 13:34:37 发布

阅读量1.5k

点赞数 38

分类专栏： # html # css 前端开发文章标签： web 前端 html SVG ：before ：after css

本文链接：https://blog.csdn.net/SEO_juper/article/details/134993186

版权

前端开发同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

:before 和 :after 伪元素用于在 HTML 元素的开始和结束前添加内容。这些伪选择器有助于添加内容或其他效果，而无需使用 HTML DOM 中不必要的元素。使用这些选择器，你可以在元素上添加内容或任何颜色和 CSS 效果。顾名思义，:before 选择器会在元素之前添加内容，而 :after 元素则会在元素之后添加内容。

您可以使用这些选择器添加任何图像、颜色、背景效果等。在本文中，我们将使用这些选择器在元素之前和之后添加 SVG 图像。有两种方法可以做到这一点，如下所示：

使用这些选择器的 content 属性。
使用 CSS 的 background-image 属性。

现在让我们详细讨论这些方法，以及它们在每种方法的不同代码示例中的实际实现。

通过使用 content 属性

content 属性是用于向 HTML 元素添加任何类型的内容的 CSS 属性。我们可以使用这个属性在元素之前和之后添加 SVG 图像内容，方法是在：before 和：after 伪选择器中使用它。

语法

下面的语法将显示如何使用伪选择器中的 content 属性来添加任何类型的内容：

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

现在让我们通过在代码示例中实际实现 HTML 元素来了解如何使用这些选择器在使用 content 属性之前和之后添加 SVG。

步骤

步骤1 - 在第一步中，我们将定义一个HTML元素，以使用CSS属性在其之前和之后添加内容。
步骤2 - 在此步骤中，我们将为HTML元素分配一个类，该类将用于选择元素并添加之前和之后的内容。
步骤3 - 在最后一步中，我们将选择HTML元素，并使用伪选择器在元素之前和之后添加SVG图像。

例

下面的示例将说明如何使用 content 属性在 HTML 元素之前和之后添加 SVG -

<!DOCTYPE html>
<html lang = "en">
<head>
   <style>
      .result:before{
         content: url('https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg');
         zoom: 20%;
      }
      .result:after{
         content: url('https://www.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 图像。这是将 SVG 与：before 和：after 伪元素一起使用的第一种方法。

通过使用 background-image 属性

background image 属性用于向 HTML 元素添加一个或多个背景图像。我们可以使用此属性将 HTML 元素之前和之后的 SVG 图像添加为：before 和：after 伪元素的背景图像。

语法

下面的语法将显示使用 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://www.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://www.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 伪元素的背景。这是使用 SVG 在伪元素之前和之后的另一种方法，而不是 content 属性方法。

结论

在本文中，我们借助代码示例了解了将 SVG 与：before 和：after 伪元素一起使用的两种不同方式或方法。我们已经详细讨论了这两种方法，在代码示例的帮助下实际实现了它们，并了解了它们的工作原理。

SEO_juper

关注

38
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
如何将 SVG 与：before 或：after 伪元素一起使用？

before 和 :after 伪元素用于在 HTML 元素的开始和结束前添加内容。这些伪选择器有助于添加内容或其他效果，而无需使用 HTML DOM 中不必要的元素。使用这些选择器，你可以在元素上添加内容或任何颜色和 CSS 效果。顾名思义，:before 选择器会在元素之前添加内容，而 :after 元素则会在元素之后添加内容。您可以使用这些选择器添加任何图像、颜色、背景效果等。在本文中，我们将使用这些选择器在元素之前和之后添加 SVG 图像。
复制链接

扫一扫