To clarify this, I’m attaching a picture. What I’m referring to is that the bullet point is not perfectly centered, it is slightly shifted upward.
Here is the code I wrote for both the HTML and CSS. To be honest, it doesn’t deviate much from the default behavior.
*,
*::before,
*::after {
box-sizing: border-box;
}
ul {
padding-left: 1.8em;
}
ul > li {
padding: .1em 0;
}
li::marker {
color: #1f93a1;
font-size: 1.5rem;
font-weight: 800;
}
ul > li > p {
margin-top: 0;
margin-bottom: 0;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>List Items</title>
</head>
<body>
<ul>
<li>First Item</li>
<li>Second Item</li>
<ul>
<li>Sub-item</li>
<li>Sub-item</li>
</ul>
<li>Third Item</li>
</ul>
</body>
</html>I appreciate any suggestions.