Cacher is the code snippet organizer for pro developers

%root% li::before{
content: ""; 
background-color: var(--action);
  width:.5em;
  height:.5em;
  position: absolute;
  top: calc(var(--text-m) * .5);
  left:-.5em;
	margin-left: -.5em;
  
/*Margin left is VERY important to mimic list-style-position:outside*/

}

li::before
{content: "•"; color: red;
display: inline-block; 
width: 1em;
margin-left: -1em
/*Margin left is VERY important to mimic list-style-position:outside*/
}

content: "\25a0";  --> large square
content: "\25AA";  --> small square
content: "\21e2"; --> dotted Arrow right
content: "\2794"; -- heavy arrow right

//// Optics
/// List Styles
.smart-spacing > ul {
  list-style-type:none;
  li {
    position:relative;

    &:before {
      content: "\25CF"; 
      font-size:1rem;
      color: var(--secondary);
      display: inline-block; 
      width: 1em;
      margin-left: -1em;
      /*Margin left is VERY important to mimic list-style-position:outside*/
    }
  }

}