<section class="list-demo">
<ul>
<li><a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" target="_blank">Tim Berners-Lee</a></li>
<li><a href="https://en.wikipedia.org/wiki/Robert_Cailliau" target="_blank">Robert Cailliau</a></li>
<li><a href="https://en.wikipedia.org/wiki/Vint_Cerf" target="_blank">Vint Cerf</a></li>
<li><a href="https://en.wikipedia.org/wiki/Bob_Kahn" target="_blank">Bob Kahn</a></li>
</ul>
</section>
ul {
list-style: circle;
margin: 0;
padding: 0;
}
li {
margin-block: 6px;
color: #6247AA;
}
li::marker {
font-size: 27px;
}
li:has(:hover, :focus-within) {
list-style: disc;
color: #A06CD5;
}
a {
color: currentColor;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
}
/* General styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 24px 16px;
font-family: "Figtree", sans-serif;
font-size: 1.2rem;
line-height: 1.6rem;
background-image: linear-gradient(30deg, #C9C9C9, #A3A3A3);
min-height: 100vh;
}
.list-demo {
background: #FFF;
padding: 40px;
border-radius: 20px;
}
@media screen and (min-width: 500px) {
body {
padding: 48px 24px;
}
.list-demo {
padding: 80px;
}
}
This Pen doesn't use any external JavaScript resources.