How to Design Bullets & Lists?

Astra by default provides a simple design for bullets and lists. Below is the screenshot for simple code added with WordPress editor in ‘Text’ mode and its output with Astra –

If you would like to add some style to bullets and lists, you can use the following CSS. Below are the steps that show how to use CSS.

  • Step 1 – Add the following CSS classes to ol (ordered lists) and ul (unordered list).
    • For ol (ordered lists) – ‘ast-content-ol-list’
    • For ul (ordered lists) – ‘ast-content-ul-list’
<ol class="ast-content-ol-list">
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ol> 
<ul class="ast-content-ul-list">
   <li>Red</li>
   <li>Blue</li>
   <li>White</li>
   <li>Yellow</li>
   <li>Green</li>
</ul> 

Step 2 – Copy the following custom CSS to your website. Read how you can add custom CSS? 

 /* 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%; 
} 

/* 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); 
} 

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

Not the solution you are looking for? Check other articles, or open a support ticket.