csswebvalue-of-css-property

list-style-type string value works fine, even though it is not a valid value

I've been working on adding some lists to an existing project. One thing I needed was a '>' as the bullet point. Easy enough by using .myselector:before and setting the content to '>'.

Just out of curiosity, I tried to set this using list-style-type by setting it to '>`.

.myselector {
  list-style-type: '>';
}

I wasn't expecting it to work. VS Code even gives an error. But it works perfectly fine. The lists have a '>' instead of the default circle and there aren't any browser errors. How is this possible?

Solution

  • According to MDN https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type it si possible to use string as value of list-style-type. The problem is that, not every browser supports it - for example Safari or Edge. For now I recommend using ::before as best solution.