<ol>
<li>Ooops.</li>
<li>The default list-position, outside, means the marker is outside the centered text box.</li>
<li>That will make it look like the markers are left aligned.</li>
</ol>
<ol class="one">
<li><br>If we kick the `list-style-position` inside, the numbers will be centered along with the text.</li>
<li><br>Adding a literal <br> element will put it up top (like we are aiming for).</li>
<li><br>Having to use a special HTML element ain't great though.</li>
</ol>
<ol class="two">
<li>Rather than use a default `list-style`, we can override it with `::marker`</li>
<li>This means we can use whatever, text, unicode, emoji...</li>
<li>Plus we can style it, at least a little.</li>
</ol>
<ol class="three">
<li>But if we hard-code the `::marker`, we lose the numbering.</li>
<li>We can get the numbering back by using counters.</li>
<li>Here we've used that trick as well as the super weird line-break-in-pseudo-content trick.</li>
</ol>
<ol class="four">
<li>`::marker` is somewhat new though.</li>
<li>This is an example of using a `::before` pseudo element instead.</li>
<li>It probably has slightly better browser support, and you don't need to weird white-space hack.</li>
</ol>
ol,
ul {
text-align: center;
background: #eee;
margin: 1rem;
padding: 1rem;
border: 1px solid #ccc;
}
.one {
list-style-position: inside;
}
.two {
list-style-position: inside;
li::marker {
white-space: pre-wrap;
content: "❤\A";
color: red;
font-size: 125%;
font-weight: bold;
}
}
.three {
counter-reset: ol;
list-style-position: inside;
li {
counter-increment: ol;
&::marker {
white-space: pre-wrap;
content: counter(ol) ". \A";
color: orange;
font-size: 200%;
}
}
}
.four {
counter-reset: ol;
list-style: none;
li {
counter-increment: ol;
&::before {
display: block;
content: counter(ol) ".";
color: orange;
font-size: 200%;
}
}
}
body {
margin: 0;
font-family: system-ui;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.