css - 自定义 list Avada Wordpress

Question

我正在使用 Avada Wordpress 主题。

我想创建一个显示那种结果的 list

其中有一行文本(我知道如何让它出现)。

您知道如何自定义检查列表模块或其他模块或使用自定义 CSS 来获得此“line-bullet-point”吗？

谢谢

Answer 1

HTML

   <ul>
        <li>
          <span class='line'></span>
          <span class='circle'></span>
        </li>
        <li>
          <span class='circle'></span>
        </li>
    </ul>

CSS

        ul {
            list-style : none;
        }
        li{
            display : flex;
            flex-flow: row;
            min-height : 100px;
            position : relative;
        }

            span.circle {
                margin-right : 100px;
                text-align: center;
                width : 1em;
                height : 1em;
                border:1px solid red;
                background-color:#f3f5f6;
                border-radius : 50%;
                z-index : 100;
            }

            span.line {
                position : absolute;
                height : 100%;
                border : solid red 0.1em;
                top : 1em;
                left : 0.5em;
            }
            li:last-child span.line{
                display : none;   
            }

JSfiddle:http://jsfiddle.net/1yqw1y87/1/