How do I change the colour of a bullet in an ordered list (HTML)?

Question

I'm designing a webpage and want to change the colour of the bullet in the unordered list to red and increased its size. I've searched on Google but haven't found out a way how to do this. I would also like to put some distance between the image and the paragraph text.

Below is the code I've typed:

<!DOCTYPE html>
<html>
<head>
    <style>
    h1 {
        text-align: center;
       }

    h5 {
         text-align: center;
       }

    body {
           background-color: #FAFAFA;
         }

    </style>
</head>

<body>

    <h1>About Me</h1>
    <h5>Hanjour and Haznawi</h5>

    <div style="text-align: right">
    <img src ="aine.jpg" alt ="personal" width="200" length="200" style="float: left;">
    </div>
    
        <li>
        <ol>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</ol>
        </li>

</body>
</html>

https://www.w3schools.com/howto/howto_css_bullet_color.asp – Laaouatni Anas Dec 29 '21 at 15:52 — Laaouatni Anas, Dec 29 '21 at 15:52

David Thomas · Answer 1 · 2021-12-29T15:58:59.147

First, start with valid HTML; an <li> element must be a descendant of either a <ul> or <ol>, for some reason you've reversed that wrapping. Corrected, it should like:

::marker {
  color: red;
}

<ol>
  <li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ol>

Here, we use the ::marker pseudo-element to style the markers of all <li> elements within the document; to style those of <ol> and <ul> differently, we can instead:

ol li::marker {
  color: red;
}
ul li::marker {
  color: purple;
}

<ol>
  <li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ol>

<ul>
  <li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ul>

In the event that you choose not to use the default list-marking, and use list-style-none on the <li>, <ul> or <ol> elements, and use CSS generated-content the ::marker pseudo-element will be removed, and instead you'd have to style the color specifically, as so:

*, ::before, ::after {
  box-sizing: border-box;
  font: 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

ol, ul, li {
  list-style-type: none;
}

ul, ol {
  counter-reset: listCounter;
}

li::before {
  content: counter(listCounter);
  color: lime;
  margin-inline: 1em;
}

<ol>
  <li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ol>

<ul>
  <li>My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.</li>
</ul>

seantsang · Answer 2 · 2021-12-29T16:01:50.773

Change the colour of the bullet in the unordered list to red and increased its size.

::marker {
  color: red;
  font-size: 2em;
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

Put some distance between the image and the paragraph text.

Add CSS style to the <img> tag. e.g. Adding margin.

<img src="aine.jpg" alt="personal" width="200" length="200" style="float: left;margin-right: 20px;" />

Correcting your HTML: <li> should be followed by <ol>.

Complete HTML code snippet as below:

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      text-align: center;
    }
    
    h5 {
      text-align: center;
    }
    
    body {
      background-color: #fafafa;
    }
    
     ::marker {
      color: red;
      font-size: 2em;
    }
  </style>
</head>

<body>
  <h1>About Me</h1>
  <h5>Hanjour and Haznawi</h5>

  <div style="text-align: right">
    <img src="aine.jpg" alt="personal" width="200" length="200" style="float: left; margin-right: 20px" />
  </div>

  <oi>
    <li>
      My name is Osirin. I'm 23 and currently studying Computer Science in college. I'm a bit late starting third level as I had a few issues in secondary school. Despite this, I'm committed to finishing my degree and working abroad in the States for Google.
    </li>
  </oi>
</body>

</html>

How do I change the colour of a bullet in an ordered list (HTML)?

2 Answers2