[分享]css中怎么在文字前加图案

在CSS中，在文字前加入图案，常常用来强调特定的内容或者完成某些特别的设计效果。下面介绍两种方法实现在文字前加上图案。方法一：使用CSS中的background属性，将background和texti...

在CSS中，在文字前加入图案，常常用来强调特定的内容或者完成某些特别的设计效果。下面介绍两种方法实现在文字前加上图案。
方法一：
使用CSS中的background属性，将background和text-indent属性结合起来实现在文字前加上图案的效果。代码如下：

p {
  background: url('图案路径') no-repeat left center;
  text-indent: 20px;   /*文本缩进*/
} 

这种方法的优点在于可以通过background属性随意更换图案，还可以设置图案的位置、重复、大小等。不过需要注意的是，图案最好是小尺寸的，以免影响页面加载速度。
方法二：
使用CSS中的before伪元素，在文本前插入额外的内容。代码如下：

p:before {
  content: "";   /*生成额外的内容*/
  display: inline-block;   /*行内元素*/
  width: 20px;   /*宽度*/
  height: 20px;   /*高度*/
  background: url('图案路径') no-repeat center center;   /*图案路径*/
  margin-right: 10px;   /*与文字的间距*/
} 

通过before伪元素，在文本前插入一个设置好大小与背景的块级元素，即可实现在文字前加上图案的效果。相比之前的方法，使用before伪元素在调整样式时更加灵活，但是需要注意的是，before伪元素与文本的结合需要基于显示的inline-block元素才能实现。
综上，以上两种方法都可以用来实现在文字前加上图案的效果，具体选择哪一种方法，需要根据实际情况而定。