To increase the size of the list-style-type (bullet) in an unordered list, you can use the ::marker pseudo-element and apply CSS properties to modify its size. Here’s an example:

<ul class="my-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.my-list {
  list-style-type: none; /* Remove default bullet */
  margin-left: 20px;
}

.my-list li::marker {
  content: '\2022'; /* Unicode character for bullet */
  font-size: 20px; /* Increase bullet size */
  color: blue; /* Customize bullet color */
  margin-right: 5px; /* Space between bullet and list item */
}

In this example, we remove the default bullet using list-style-type: none; and then customize the appearance of the bullet using the ::marker pseudo-element.

The content property sets the content of the marker to the Unicode character \2022, which represents a bullet point.

The font-size property increases the size of the bullet.

The color property allows you to customize the color of the bullet.

The margin-right property adds space between the bullet and the list item.

Adjust the values of these properties according to your desired size, color, and spacing.

Note: It’s important to keep in mind that the ::marker pseudo-element is supported in modern browsers but may not work in older browsers.

When you increase the size of the marker, the alignment might not be proper by default. To properly adjust the alignment of the bullet, you can use a custom bullet image or create a pseudo-element for the list item itself. Here’s an updated example using a pseudo-element for the list item:

.my-list {
  list-style-type: none; /* Remove default bullet */
  margin-left: 20px;
}

.my-list li {
  position: relative;
  padding-left: 25px; /* Space for bullet */
}

.my-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px; /* Bullet size */
  height: 10px; /* Bullet size */
  background-color: blue; /* Bullet color */
  border-radius: 50%;
}

In this updated example, we use a pseudo-element ::before for the list item (li) to create a custom bullet. The ::before pseudo-element is absolutely positioned relative to the list item.

We adjust the left, top, and transform properties to vertically center the bullet within the list item.