How to Design Bullets & Lists?

Astra by default provides simple design for bullets and lists. Here is how it looks:

If you would like to change that, here is some CSS snippet which can help you get started:
Just make sure to add class for ul(unordered list) ‘ast-content-ul-list’ and for ol(ordered lists) ‘ast-content-ol-list’.

/* Unordered list style */
 .entry-content ul.ast-content-ul-list {
 margin-left:1.4em;
 }
 .entry-content ul.ast-content-ul-list li {
 position: relative;
 padding-left: 30px;
 list-style: none;
 }
 .entry-content ul.ast-content-ul-list li:after{
 position: absolute;
 top: -webkit-calc( 50% - -1px);
 top: calc( 50% - -1px);
 left: 0;
 width: 20px;
 height: 20px;
 margin-top: -10px;
 padding-top: 2px;
 color: #fff;
 text-align:center;
 background-color: #0274be;
 content: "\e900";
 font-size: 10px;
 font-family: 'Astra';
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-transform: rotate(270deg);
 -ms-transform: rotate(270deg);
 transform: rotate(270deg);
 }

/* Order list style */
 .entry-content ol.ast-content-ol-list {
 counter-reset: my-ol-counter;
 margin-left:1.4em;
 }
 .entry-content ol.ast-content-ol-list li {
 position: relative;
 padding-left: 30px;
 list-style: none;
 }
 .entry-content ol.ast-content-ol-list li:before {
 position: absolute;
 top:50%;
 left: 0;
 width: 20px;
 height: 20px;
 margin-top: -10px;
 color: #fff;
 text-align:center;
 background-color: #0274be;
 content: counter(my-ol-counter,decimal);
 counter-increment: my-ol-counter;
 font-size: 11px;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 }

After adding the CSS, your bullets and lists will look as below: