CODEWITHSUNDEEP
htmlcssinline-styles
Skeeve
Skeeve

Reputation: 101

Styling list item marker with inline style attribute

Is it possible to change the style of a list item marker using the inline style attribute of the list item?

I would like to write something like

<ol>
  <li>First</li>
  <li style="::marker {color: red}">Second</li>
  <li>Third</li>
</ol>

and the desired result is that only the number of the second item becomes red. For sure this can be achieved using a custom class e.g. as follows:

<!DOCTYPE html>
<html>
<head>
<style>
li.reddish::marker { 
  color: red;
}
</style>
</head>
<body>

<ol>
  <li>First</li>
  <li class="reddish">Second</li>
  <li>Third</li>
</ol>

</body>
</html>

but my question is specifically about the style attribute of the list item node.

Upvotes: 0

Views: 742

Answers (3)

imhvost
imhvost

Reputation: 9904

Use css variable:

li::marker {
  color: var(--marker, currentColor);
}
<ol>
  <li>First</li>
  <li style="--marker: red;">Second</li>
  <li>Third</li>
</ol>

Upvotes: 2

Imeah
Imeah

Reputation: 29

const liStyles = { paddingBlock: "10px", lineHeight: "19px", marker: { color: "#212223A" }, };

 <ul>
    <li>Was first released in 2013</li>
    <li style={liStyles}>Was originally created by Jordan Walke</li>
    <li style={liStyles}>Has over 100k stars on Github</li>
    <li style={liStyles}>Is maintained by Facebook</li>
    <li style={liStyles}>Is maintained by Facebook</li>
    <li style={liStyles}>
      Powers thousands of enterprise apps, including mobile apps
    </li>
  </ul>

I did this in trying to solve the problem of writing the cssinline with react

Upvotes: 0

Kosh
Kosh

Reputation: 18393

If you need it inline, go further -- add more:

<ol>
  <li>First</li>
  <li style="color: red"><span style="color:initial">Second</span></li>
  <li>Third</li>
</ol>

Upvotes: 1

Related Questions