📜  如何将 SVG 与 :before 或 :after 伪元素一起使用?

📅  最后修改于: 2021-09-01 02:37:21             🧑  作者: Mango

:before:after伪元素允许在不添加不必要标记的情况下向网页添加样式。 SVG 内容可以通过以下描述的方法使用这些伪元素添加:

方法1:使用背景图像属性:背景图像属性用于组一个或多个背景图像给一个元素。宽E也可以用这个添加的SVG内容 属性并将内容属性留空。其他 CSS 属性有助于正确定位和调整内容大小。

例子:

HTML


  

    

  

    

        This is the normal content     

       

        The SVG images are added before          and after the line using :before          and :after pseudo-elements     

  


HTML


  

    

  

    

        This is the normal content     

       

        The SVG images are added before         and after the line using :before          and :after pseudo-elements     

  


输出:

方法二:使用content属性: CSS中的content属性用于方便地页面上动态生成内容。我们可以使用这个添加 SVG 内容 空伪元素上的属性。其他 CSS 属性有助于正确定位和调整内容大小。

例子:

HTML



  

    

  

    

        This is the normal content     

       

        The SVG images are added before         and after the line using :before          and :after pseudo-elements     

  

输出: