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.

Position pseudo-elements

Position pseudo-elements

- Now we're ready to position our pseudo elements. One thing we'll need to take care of first is to make sure that the parent element of the pseudo elements, which are actually the list items here have a positioning property as well. If we were to position an element that's inside of a list item which is where the pseudo elements are and the main parent does not have positioning properties, the pseudo element will position in relation to the body element. The first thing we'll need to do is come in here to our ol.cities space li rule, and let's come in here and add a position property here. We're going to add position of relative. What this will do is not change the relative position of this item inside of its parent, which is this one, however the pseudo elements inside the list item will position in relation to the list item itself. Now with this in place, let's come down here to our pseudo element after our padding. Let's hit Return and let's add a few more properties. Next we'll…

Contents