Lists Custom CSS - Rich Text - CodePen Help

Design help Custom code
1

I’m trying to style the Bullets and Numbers of Lists in a Rich Text Element. I found some code on CodePen that I can get to work in their editor and found my Webflow CSS indicator for the section, but part of the code comes up as an error in the Webflow page Custom Code Section.

CodePen Example I’m using: https://codepen.io/Cr0up13r/pen/VeeaMR
And below for easy reference:

HTML Example

<h1>Favorite Web-Frameworks:</h1>
<ul class="numbered-list">
  <li>AngularJS</li>
  <li>Yii</li>
  <li>Symfony</li>
  <li>Ruby on Rails</li>
  <li>Laravel</li>
</ul>

CSS Example

ul.numbered-list {
  counter-reset: li;
  list-style-type: none;
  font-size: 14px;
  line-height: 18px;
  padding-left: 10px;
  
  li {
    position: relative;   
    padding: 5px 0 5px 30px;
    
    &:before {
      content: counter(li);
      counter-increment: li;
      height: 20px;
      width: 20px;
      border: 1px solid blue;
      border-radius: 50%;
      color: red;
      text-align: center;
      position: absolute;      
      left: 0;
      top: 4px;
    }
  }
}

In Webflow, I’ve added the code to the Head Section of the Custom Code, like this:

<style>
.w-richtext ol {
  counter-reset: li;
  list-style-type: none;
  font-size: 19px;
  line-height: 27px;
  padding-left: 10px;
  
  li {
    position: relative;   
    padding: 5px 0 5px 30px;
    
    &:before {
      content: counter(li);
      counter-increment: li;
      height: 27px;
      width: 27px;
      background: #111111;
      border-radius: 50%;
      color: white;
      text-align: center;
      position: absolute;      
      left: 0;
      top: 4px;
      margin: 0 0 0 0;
    }
  }
}
</style>

But the ‘li’ element is giving me this highlighted error:

Screenshot 2023-04-28 at 9.33.02 AM
Screenshot 2023-04-28 at 9.33.02 AM1282×1118 99.9 KB

How can if fix that li error to get this to work?

Here is my site Read-Only: Webflow - Ostendo.Design

2

Hi Kaleb!

Just a wild guess. You could try to separate the li styling from the ol nestind and place it below, like so:

.wrichtext li {
    position: relative;
    padding: 5px 0 5px 30px
}

Let me know if it works!

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>