HTML+CSS修改li前小圆点的样式or颜色

修改样式
- 有参考样式的图片情况：
- 将原有的小圆点删除后再添加
修改颜色
代码

修改样式

有两种方法比较方便的方法

有参考样式的图片情况：

可以使用图像处理软件将图片导出来使用

list-style-image:url("");

即可修改li前原点样式
需要调位置的话框选图的时候可以在原图周围框选的稍微多一点

将原有的小圆点删除后再添加

首先使用

list-style: none;

将原有的小圆点删除，然后使用CSS伪元素li：before 添加

修改颜色

如果只是修改颜色的话，可以使用li内的color属性直接修改
再给字体加一个标签，将字体改回原来的颜色即可

代码

下面是测试代码：

HTML代码块：

<ul class="first"><li>这是一种修改li前小圆点方式</li><li>这是一种修改li前小圆点方式</li>
</ul>
<ul class="second"><li>这是另一种修改li前小圆点方式</li><li>这是另一种修改li前小圆点方式</li>
</ul>
<ul class="third"><li><span> 这是修改li前小圆点颜色</span></li><li><span> 这是修改li前小圆点颜色</span></li>
</ul>

CSS代码块：

.first li{list-style-image: url("./images/li前小圆点.png");}
.second li{list-style: none;}
.second li:before{content: url("./images/li前小圆点.png");
}
.third li{color: red;}
.third li span{color: black}

li：before内可以有更多样式，具体可以网上查找

以下是效果图：

欢迎补充

HTML+CSS修改li前小圆点的样式or颜色相关推荐

CSS定义li前小点( · )的样式
语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | ...
ul li设置横排，并除去li前的圆点
效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单让ul li横向排列及圆点处理我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...
详解微信小程序swiper小圆点默认样式改变
在微信小程序中,轮播图上的小圆点默认样式为黑灰色,这在视觉体验上不是很惊艳眼球,有时达不到我们的需求.那么,怎样进行默认样式的改变呢? 需要准备的东西:3张图片(swiper1,swiper2,swi ...
CSS 去掉li前的小圆点
无序列表 ul li 去掉li前的小圆点语法: list-style:none;
css伪元素实现小圆点样式——css基础积累
最近在做后台管理系统,遇到一个需求,需要在菜单中添加一个小圆点样式.此时可以通过css伪元素样式来实现. .parent-node {font-size: 14px;color:#999999;&am ...
如何给li前的圆点添加背景颜色
li{list-style:disc inside;color:red;width:32px;} 注:必须设置list-style-type:disc:才能给其设置背景颜色:通过width控制其位置.
css实现标题前小竖杠
效果图 <div class="title"><span>标题</span></div> .title {position: rel ...
css修改layui的下拉框样式 js_layui，经典模块化前端UI框架，前端菜鸟带你初识栅格。...
大家好,我是前端菜鸟李不白,这一期内容带来的是layui框架中的栅格布局. 那么什么才叫做栅格呢?如图所示. 那么网页中的栅格是怎么区分的?以优酷电脑版为例. 并不是说优酷就用的layui开发的,这里 ...
使用css修改input框中checkbox的样式
概述在页面设计时,我们经常使用input复选框.由于界面设计的需要,我们需要修改复选框的样式,使得界面更美观或者适应新的需求.由于CheckBox伪类修改比较复杂,通常修改的方式有两种,一个是链入图 ...

HTML+CSS修改li前小圆点的样式or颜色

HTML+CSS修改li前小圆点的样式or颜色

修改样式

有参考样式的图片情况：

将原有的小圆点删除后再添加

修改颜色

代码

HTML+CSS修改li前小圆点的样式or颜色相关推荐

最新文章

热门文章