You need to create custom bullets with css for this and then use nth-child selector to style them like you want as shown in below snippet.
.styled-list {
list-style: none;
max-width: 200px;
padding: 0;
margin: 0;
}
.styled-list li {
position: relative;
padding-left: 10px;
float: left;
}
.styled-list li:before {
border-radius: 100%;
position: absolute;
background: #000;
content: '';
height: 5px;
width: 5px;
top: 6px;
left: 0;
}
.styled-list li:nth-child(even) {
padding-right: 10px;
text-align: right;
padding-left: 0;
float: right;
}
.styled-list li:nth-child(even):before {
left: auto;
right: 0;
}
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5
- List Item 6
- List Item 7
- List Item 8
Run code snippetExpand snippet
Or you can remove float if you wants this:
.styled-list {
list-style: none;
max-width: 200px;
padding: 0;
margin: 0;
}
.styled-list li {
position: relative;
padding-left: 10px;
}
.styled-list li:before {
border-radius: 100%;
position: absolute;
background: #000;
content: '';
height: 5px;
width: 5px;
top: 6px;
left: 0;
}
.styled-list li:nth-child(even) {
padding-right: 10px;
text-align: right;
padding-left: 0;
}
.styled-list li:nth-child(even):before {
left: auto;
right: 0;
}
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- List Item 5
- List Item 6
- List Item 7
- List Item 8
Run code snippetExpand snippet