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