Hexagon list-bullets

by Lee Whitworth

HTML

<ul class="hex">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
</ul>
<ul class="">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
</ul>

CSS

*, *:before, *:after {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

ul.hex {
    list-style: none;
    padding: 0px;
}

ul.hex > li {
    padding-left: 15px;
    position: relative;
    border-color: rgba(0,0,0, 1);
}

ul.hex > li:before, ul.hex > li:after {
    position: absolute;
    content: "";
    left: 0%;
    top: 50%;
    border-color: transparent;
    border-style: solid;
    width: 11px;
    height: 5px;
    border-width: 0px 3px;
}

ul.hex > li:before {
    margin-top: -5px;
    border-bottom: 5px solid;
    border-bottom-color: inherit;
}

ul.hex > li:after {
    margin-top: 0px;
    border-top: 5px solid;
    border-top-color: inherit;
}