Style the pseudo-elements

Keyboard Shortcuts

Now that our pseudo-elements are in place, we can begin to style our pseudo-elements. We start by setting some margins and padding to give a bit of space in the order to position our pseudo-elements later on. Then we style our numbers by adjusting the font size, style, weight, and background.

- [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 property's gonna be top,…we'll set that to zero, then a space,…

Resume Transcript Auto-Scroll

Author

Released

7/12/2016

Lists on your website can be transformed into visually engaging content by applying CSS style properties. In this course, you'll see how to make simple lists adopt dynamic styles so the content on your site or application appears refined and polished. If you're a designer or developer ready to learn a bit of CSS code, this course is for you. Join Chris Converse and explore the HTML involved in numbered lists, including any sequenced or ordered lists. He helps you learn to use key CSS properties for styling lists while revealing additional design possibilities.