自定义检查列表Avada Wordpress

时间:2016-11-16 17:45:10

标签: css wordpress

我正在使用Avada Wordpress主题。

我想创建一个显示那种结果的检查列表

enter image description here

它之间有一条文字线(我知道如何让它出现)。

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

由于

1 个答案:

答案 0 :(得分:2)

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/