如何为你的文本标签添加圆点、三角等不规则图形-保姆级教程

1.通过无序列表、有序列表可以简单的生成带符号的文本![带符号的文本](https://img-blog.csdnimg.cn/9005611a7fa74d188ee071cd63fae0cf.png
具体代码如下：

<h4>Disc 项目符号列表：</h4> <ul type="disc"><li>测试一</li><li>测试二</li><li>测试三</li><li>测试四</li> </ul> <h4>Circle 项目符号列表：</h4> <ul type="circle"><li>测试一</li><li>测试二</li><li>测试三</li><li>测试四</li> </ul> <h4>Square 项目符号列表：</h4> <ul type="square"><li>测试一</li><li>测试二</li><li>测试三</li><li>测试四</li> </ul>

如果想要去除这些圆点，可以简单的给个去除样式

<style>ul li{list-style: none; } </style>

具体效果如下：

2.如果想给特定的文本添加想要的原点或者可以用代码生成的不规则图形，则可以利用before和after来添加：

具体代码如下：

li{ position: relative;//父元素相对定位 } li p::before{content:'';position: absolute;//绝对定位display: block;width:5px;//宽度为5pxheight:5px;//高度为5pxbackground:#000000;border-radius: 50%;//规则为圆形left:0;//位置相对固定，距离最左边0pxtop: 15px;//位置相对固定，距离最上边15px}

像这样使用绝对定位记得要给父元素相对定位，这样才能确保绝对定位层级关系，是在父元素基础上进行绝地定位

总结

以上是生活随笔为你收集整理的如何为你的文本标签添加圆点、三角等不规则图形-保姆级教程的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。