/* 定义一个小圆点 */ ul { list-style: none; /* 取消默认样式 */ } li:before { content: "•"; /* 设置内容为圆点 */ margin-right: 5px; /* 圆点和文字之间添加一定的间距 */ font-size: 16px; /* 字体大小 */ color: #333; /* 圆点颜色 */ } /* 定义一个大圆圈 */ ol { list-style: none; /* 取消默认样式 */ } li:before { content: ""; /* 设置内容为空 */ display: inline-block; /* 显示为块级元素 */ width: 20px; /* 圆圈直径 */ height: 20px; margin-right: 5px; /* 圆圈和文字之间添加一定的间距 */ border-radius: 50%; /* 边框半径 */ border: 2px solid #333; /* 边框样式 */ } /* 定义一个三角形 */ nav { list-style: none; /* 取消默认样式 */ } li:before { content: ""; /* 设置内容为空 */ display: inline-block; /* 显示为块级元素 */ width: 0; /* 去除宽度 */ height: 0; /* 去除高度 */ border-style: solid; /* 边框样式 */ border-width: 0 5px 5px 5px; /* 三角形大小和位置 */ border-color: transparent transparent #333 transparent; /* 三角形颜色 */ }
以上代码展示了如何自定义三种不同形态的圆点,大家可以根据实际需要进行修改。