0

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

Archer Sterling
  • 1
  • Welcome to SO! Note that as a general rule, you should put all the necessary information in your question itself, not links to other websites which may no longer work in the future. You should especially avoid posting images of code, as it forces people to retype that code if they want to try it out. If you want to learn more about the good practices and increase your chances of receiving help on this site, you can always read the [FAQ](https://meta.stackoverflow.com/questions/tagged/faq?tab=Votes). With all of that said, good luck on your learning journey :) – Domino Jun 15 '22 at 14:56

2 Answers2

0

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.

shamil carela
  • 74
  • 8
0

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.

Domino
  • 6,314
  • 1
  • 32
  • 58