Lists Custom CSS - Rich Text - CodePen Help

Design help Custom code
3

@RoryVB, don’t make it look too easy, geez!

It’s worked to close the initial style, and initiate a new one, but keep the ol in the identifier, otherwise it puts the style in front of bullet li elements on the same page.

Here’s the full code, plus a few lines to style ul bullets, and a p + p modifier to treat paragraphs the way they were meant to be (no indent on the first, indent every one after)!

<style>
.w-richtext p {
	text-align: left;
}

.w-richtext p + p {
	text-indent: 36px;
}

.w-richtext ol {
  counter-reset: li;
  list-style-type: none;
  padding-left: 10px;
  }
  
 .w-richtext ol li {
    position: relative;   
    padding: 5px 0 5px 48px;
    
   &:before {
      font-family: Caeli, Arial, sans-serif;
      content: counter(li);
      counter-increment: li;
      font-size: 17px;
      line-height: 27px;
      height: 27px;
      width: 27px;
      background: #111111;
      border-radius: 50%;
      color: white;
      text-align: center;
      position: absolute;      
      left: 0;
      top: 4px;
      padding: 0px 0 0px 0;
      margin: 0 0 0 0;
    }
	}
.w-richtext ul {
  list-style: none; /* Remove HTML bullets */
  padding-left: 19px;
  margin-left: 36px;
}

.w-richtext ul li { 
  padding-left: 0px;
  padding-right: 48px;

	&:before {
  font-family: Caeli, Arial, sans-serif;
  font-size: 27px;
  content: "★"; /* Insert content that looks like bullets */
  padding-right: 8px;
  color: #111111; /* Or a color you prefer */
  line-height: 27px;
  margin: 0px 9px 0px -36px;
	}
}
</style>