Chènevis Chènevis - 17 days ago 5
CSS Question

Custom check-list Avada Wordpress

I am using the Avada Wordpress theme.

I want to create a check-list that will display that kind of result

enter image description here

There is a text line among it (and I know how to make it appear).

Do you know how to custom the check-list module or an other module or use custom CSS to have this "line-bullet-point"?

Thanks

Answer

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/

Comments