How do I increase the marker size and center the text of my list items?-CodePudding

I have created a simple unordered list:

<body>
    <div >
        <label for="bulletPoints">Todo:</label>
        <ul id="bulletPoints">
            <li>Apples</li>
            <li>Bananas</li>
            <li>Pears</li>
        </ul>
    </div>
</body>

I am using circles as markers and I have realized these are too small. I could increase the font size of the marker, but in this case, the text of my list-items is not aligned with my bullet points any more.

I have tried out different stylings to the extent that I cannot believe how difficult it is to simply increase only the marker size and still have a nicely designed list. Here are my latest css settings:

.todo-section {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  padding: 0 10px;
  width: 50%;
  border: 1px solid black;
}

.todo-section label {
  margin-top: .57rem;
}

#bulletPoints {
  margin: 0;
  list-style-type: circle;
  list-style-position: inside;
}


#bulletPoints li {
    line-height: 2rem;
}

#bulletPoints li::marker {
    font-size: 2rem;
    margin-right: 10px;
}

Can someone help me out?

CodePudding user response：

Use ::marker CSS pseudo-element:

ul li::marker {
  color: red;
  font-size: 2.5em;
 }

CodePudding user response：

for center your text list use for li display: flex align-items: center justify-content: center and for first problem use Use ::marker CSS pseudo-element: then use font-size

CodePudding user response：

You can create your own markers

        #bulletPoints {
          margin: 0;
          list-style-type: none;
          list-style-position: inside;
        }


        #bulletPoints li {
            line-height: 2rem;
        }
        
        #bulletPoints li:before {
            content: 'Օ';
            margin-right: 10px;
        }
        
        /*
        #bulletPoints li::marker {
            padding-top: 10px;
            font-size: 2rem;
            margin-right: 10px;
        }
        */

Or just leave content:''; and load any image as an icon

CodePudding user response：

One way is that use from sup tag:

.todo-section {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  padding: 0 10px;
  width: 50%;
  border: 1px solid black;
}

.todo-section label {
  margin-top: .57rem;
}

#bulletPoints {
  margin: 0;
  list-style-type: circle;
  list-style-position: inside;
}


#bulletPoints li {
    line-height: 2rem;
    
}

#bulletPoints li::marker {
    font-size: 2rem;
    margin-right: 10px;
}

<body>
    <div >
        <label for="bulletPoints">Todo:</label>
        <ul id="bulletPoints">
            <li><sup>Apples</sup></li>
            <li><sup>Bananas</sup></li>
            <li><sup>Pears</sup></li>
        </ul>
    </div>
</body>