Kevin Powell - Community•2y ago

How do I style only the text inside lists

How do I style only the text inside lists, I'm using marker on these lists not "::before". And I don't want the marker to be affected at all by it.

22 Replies

13eck•2y ago

Please read #How To Ask Good Questions. We'll need to see your code (codepen preferred, no screenshots please!) to be able to do more than guess.

Peacock PlumeOP•2y ago

Why would you need code for that, I'd like to style the "text" part without affecting the ::marker. That's it.

<li>
  ::marker
  "text"
</li>

<li>
  ::marker
  "text"
</li>

The css would be example lets say I want to apply this style for instance to paragraphs, but also list text without affecting the marker part.

p, ??? {
  font-size: 2em;
}

p, ??? {
  font-size: 2em;
}

Question marks added, to show where I'd like to apply this possible change to list text

13eck•2y ago

What styles are you trying to add only to the list items is what I'm trying to ask

Peacock PlumeOP•2y ago

Oh ok font-feature-settings:

13eck•2y ago

You can apply some basic CSS to the ::marker pseudo-element so if it's something that can be added we can work with it

Peacock PlumeOP•2y ago

p {
    font-feature-settings: "cpsp" 1, "dlig" 1, "frac" 1, "cv05" 1, "cv06" 1, "cv08" 1, "cv11" 1;
}

p {
    font-feature-settings: "cpsp" 1, "dlig" 1, "frac" 1, "cv05" 1, "cv06" 1, "cv08" 1, "cv11" 1;
}

Basically the same as above and the html example above is from dev tools output.

13eck•2y ago

Hmm…I'll be honest I've not worked with font-feature-settings before, but according to MDN you can apply them (or override them) via CSS for the ::marker pseudo-element

Peacock PlumeOP•2y ago

Yeah the ::marker should not be affected only the text

13eck•2y ago

Try this:

li {
  font-feature-settings: "cpsp" 1, "dlig" 1, "frac" 1, "cv05" 1, "cv06" 1, "cv08" 1, "cv11" 1;
}

li::marker {
  font-feature-settings: normal;
}

li {
  font-feature-settings: "cpsp" 1, "dlig" 1, "frac" 1, "cv05" 1, "cv06" 1, "cv08" 1, "cv11" 1;
}

li::marker {
  font-feature-settings: normal;
}

That should remove any FFS (hehehe) added to the ::marker

Peacock PlumeOP•2y ago

And yeah is still little support for "font-feature-settings", else I would do it directly to the @font-face, but that's only supported in firefox 😦 Hmmm good point indeed I'm forgetting the cascade xD

13eck•2y ago

Embrace the cascade!

Peacock PlumeOP•2y ago

He he so true But nope it's not working, specificity issues or what hmmm My bad it works had a typo!

13eck•2y ago

WOO!

Peacock PlumeOP•2y ago

Thanks a lot!

13eck•2y ago

YIIISSSSS 🎊

Peacock PlumeOP•2y ago

🥳