Two column list with non-standard list marker

by audetwebdesign

HTML

<ul class="two-col-special">
    <li>First Category</li>
    <li>Second Category</li>
    <li>Third Category</li>
    <li>Fourth Category</li>
    <li>Fifth Category</li>
</ul>

CSS

.two-col-special {
    border: 1px dotted blue;
    margin: 0;
    padding: 0;
}

.two-col-special li {
    display: inline-block;
    width: 45%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.two-col-special li:before {
    content: '+';
    padding: 5px;
    margin-right: 5px;
    color: orange;
    background-color: white;
    display: inline-block;
}