⁰¹ Important notes

• Font dependencies;
• > The skeleton effect depends on the Redacted font to obscure the temporary markup you have place.
• This

⁰⁰ How it works

1. On page load, WFU's CSS file is loaded and applied.
2. > It styles any lists ( ordered or unordered ) in your targeted rich text elements.
3. > This prevents your visitors from seeing your list markup.
4. > Because custom CSS is loaded only on the published site, it does not affect your in-browser view, allowing you to edit your markup easily.
5. After page loads, the WFUs script runs

⁰² Advanced notes

• If you SVG is not black, you may be able to force it to black by applying these two filters prior to the others;
  brightness(0) saturate(100%)
• May also work with Webflow Interactions, e.g. changing to a color from black.
• Works fine with background colors and images, and transparent areas of the SVG. These are not affected by the filter ( tested in Chrome only ).

⁰³ Notable challenges

Requirements;

• + Easy targeting in the Webflow designer.
• + Easy markup that is intuitive to designers, and their business clients.
• + Support for the Editor, so business clients can also make use of nested lists and pro/con support.
• + Avoidance of the HTML Embed as much as possible.

Technical challenges;

• + Hiding the magic. We don't want users to see the markup as the page loads. Solved using some CSS and skeleton styling trickery.
• > https://stackoverflow.com/questions/37970289/how-to-select-text-within-li-using-css
• - Styling nested lists. HTML construction embeds nested lists within a parent list item, which means that if the parent list item is styled, the entire nested list gets that style too. This is not intuitive to designers, so I'm looking for the best way around this.
• - Styling PRO/CON items with icons. Achieved with the new ::marker CSS pseudoselector.

⁰⁴ Styling options

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

CSS-heavy

Webflow does not provide any support for styling these elements

https://webdesign.tutsplus.com/tutorials/next-level-list-bullets-with-css-marker--cms-37212

https://caniuse.com/css-marker-pseudo

https://love2dev.com/blog/customize-bulleted-list/

https://web.dev/css-marker-pseudo-element/

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#browser_compatibility

‍

‍