From the course: Design the Web: Styling a Numbered List

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Style the pseudo-elements

Style the pseudo-elements

- [Voiceover] So now that we have our pseudo elements in place, and the content of those is actually counting, based on our custom counter increment. Now we're going to start styling those pseudo elements. So the first thing we'll need to do is give ourselves a little bit of space. So let's come up here to the ol dot cities CSS rule, this is the main ordered list, let's come up here and add a margin property. So it's like margin colon space, we're gonna set zero pixels on the top then a space, zero on the right, zero on the left, then a space. Then 30 pixels on the left, that's gonna give us some space to the left hand side of the entire ordered list here, giving us some room to position our pseudo elements later on. Next let's come down here to the list items inside of our ordered list. I'm gonna come in here and break these on separate lines. So after counter increment let's hit a space, let's define margins for these list items. So we'll use shorthand style again. So the first…

Contents