CSS：创建自定义列表项目符号

Question

有没有办法使用看起来像这样的css创建项目符号？

上图最能说明我想要达到的目标。任何帮助将不胜感激。

Answer 1

LIVE DEMO
 / * HTML * /

        <ul>
    <li>Point one <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Point two <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>Point three <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li>
    <li>Point four <br>Lorem adipiscing elit. </li>
    <li>Point five <br> Lorem consectetur adipiscing elit.</li>
    </ul>
    /*CSS*/
        ul{list-style:none; padding:0}
    ul li {
        display: block;
        position: relative;
        padding: 0 0 0 40px;
        min-height:50px
    }
    li:last-child:after {display:none}
    ul li:after {
        content: '';
        top: 11px;
        left: 0;
        background-color: #000;
        height: 100%;
        width: 2px;
        position: absolute;
    }

    ul li:before {
        content: '';
        top: 10px;
        left: 0;
        background-color: #000;
        height: 2px;
        width: 30px;
        position: absolute;
    }

Answer 2

您可以使用:before和:after伪元素绘制这些行：

<强>步骤：

1. 重置默认的ul样式。
2. 在列表项上添加一些左缩进以为自定义项目符号创建空间。
3. 使用:before伪元素绘制水平线。
4. 使用:after伪元素绘制垂直线。
5. 清除由:after伪元素绘制的列表子项的垂直线，或者在除最后一项之外的所有项上绘制它们。

输出图片：



* {box-sizing: border-box;}

body {
  font: 16px/20px Arial, sans-serif;
  background: darkgreen;
  min-height: 100vh;
  padding: 30px;
  margin: 0;
}
.list {
  max-width: 500px;
  list-style: none;
  color: #fff;
  margin: 0;
  padding: 0 0 0 40px;
}
.list li {
  padding: 0 0 20px 40px;
  position: relative;
}
.list li:before,
.list li:not(:last-child):after {
  position: absolute;
  background: #fff;
  content: '';
  height: 2px;
  width: 50px;
  left: -30px;
  top: 10px;
}
.list li:not(:last-child):after {
  height: 100%;
  width: 2px;
}

<ul class="list">
  <li>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,</li>
  <li>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,</li>
  <li>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,</li>
  <li>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,</li>
</ul>