I'm a newbie at CSS/HTML and I have a website assignment due in an hour's time and I can't seem to get the bullet points on my page to just be white (instead of the default black) without the alignment screwing up and appearing in places I don't want it to be like the navbar

Here's what is looks like normally default bullet points

and here is the code normally code for default bullet points

and here's what it looks like when I include this code (in the CSS) that I found on this Stack Overflow (Change bullets color of an HTML list without using span):

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: white;
  font-size: 20px;
}

broken bullet points after copypasta from stack overflow

CodePudding user response：

The problem with the code you copied and pasted is that it's modifying the position of the bullet with position: relative and the top and left properties. I'd recommend you used this code instead:

li::before {
  content: "\2022";
  color: white;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}

Which doesn't modify the position of the bullet.

CodePudding user response：

The code you copy-pasted is doing a lot of things that you probably don't yet understand.

• list-style: none removes the default bullets completely.
• li:before allows you to pretend there is another element inside the list item, before its content, and lets you style that pseudo-element.

So the code you copied is trying to manually create fake bullets instead of customizing the ones that already exist. This is what I'd call a CSS hack, it's not something you would do unless you're trying to achieve a very specific look that's impossible to get using normal means.

If all you're trying to do is replace the bullet icon, that can be done with the CSS property list-style-type.