0

When my webpage was rendered in the browser, it shows that one of my 'li' elements has the ":: marker" css pseudo element (I did not add this style myself) from the "user agent stylesheet". What is the "user agent stylesheet" and how do I stop this style from being applied?

carrot_142
  • 33
  • 1
  • 5
  • 1
    Does this answer your question? [How to stop user agent stylesheets from overriding my css](https://stackoverflow.com/questions/24415385/how-to-stop-user-agent-stylesheets-from-overriding-my-css) – nCardot Jul 03 '21 at 03:14
  • Thank you for this response. Specifically, the browser automatically added the following style--- "::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-transform: none; text-indent: 0px !important; text-align: start !important; text-align-last: start !important; }" – carrot_142 Jul 03 '21 at 03:18
  • This is causing the bullet point icon to show up. How do I stop this from happening? – carrot_142 Jul 03 '21 at 03:18
  • @nCardot Do you have any pointers? – carrot_142 Jul 03 '21 at 03:21

2 Answers2

1

Add ul { list-style-type: none; } in your CSS to override the default style applied by the browser (from the user agent stylesheet) and remove the li bullet points

nCardot
  • 5,992
  • 6
  • 47
  • 83
0

Add ul>li::marker { content ""; } to your own CSS to hide the user agent stylesheet contents.

Modifying list-style is unlike to help, as this is extra content added outside li element.

mvpfi
  • 1
  • 1