时间戳

首页 > 解决方案 > 如何在 HTML、CSS 中将项目符号和垂直线绘制到列表项中

html - 如何在 HTML、CSS 中将项目符号和垂直线绘制到列表项中

问题描述

https://jsfiddle.net/1fynun7a/1/

在这个小提琴中使用带有线条的示例树和嵌套树也包含线条。

[AS pet the jsfiddle there is a list item ,but I want bullet symbols 
 exactly same as into the image,

Any help would greatly appreciated ?
Thanks in advance.]

图片

标签： htmlcss

解决方案

你可以用另一个伪元素来做；后

li{
/* This allows to adjust the after element relative to the <li> tag */
position: relative;
}

li:after {
    content: ".";
    position: absolute;
    left: -5px;
    top: -7px;
    font-size: 35px;
}

您可以更改列表中项目符号的大小，如下所示：

/* First */
ul li:after{
 font-size: 35px;
}
/* Second */
ul ul li:after{
 font-size: 40px;
}
/* And so on... */
ul ul ul li:after{
}

但我不确定不同的浏览器是否将点放在正确的位置，也许使用背景图像作为子弹符号

编辑：将此用于您的后元素（比使用“。”作为项目符号更好）：

li:after{ 
    content: "";
    position: absolute;
    left: -5px;
    top: 7px;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%; 
    background-color: red;
}

推荐阅读