js给文字前增加状态标识（不同颜色的点，星等）

js给文字前增加状态标识（不同颜色的点，星等）

在项目中需要在状态量前加入不同颜色的点以标识变量状态，但是没有合适的组件，网上一共有两种实现方式：

第一种实现方式是加一个div，通过设置圆形边框将其变成实心圆，实现简单，但是在项目中无法使用（div难以与文字垂直居中）https://blog.csdn.net/m0_37780367/article/details/102823064

第二种方式是使用伪元素在文字前添加不同样式的符号，实现方式如下：

1、为元素指定id，也可采用“lang”等方式，避免所有元素样式被改变。

<span v-if="record=='正常'">
    <span>
        <p id="jgzt_zc">正常</p>
    </span>
</span>
<span v-if="record=='注销'">
    <span>
        <p id="jgzt_zx">注销</p>
    </span>
</span>

2、添加要标识符号，并设定样式。

p[id='jgzt_zc']:before {
  content: '●';
  color: rgb(0, 168, 84);
}
p[id='jgzt_zx']:before {
  content: '●';
  color: rgb(240, 65, 52);
}

3、最终效果。