Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
By default, browsers place a period after the automatically generated marker of a list item and in ordered list regardless if it's type is decimal, roman numeral, or letter. Periods are quite functional but they're constant use as a trailing character are a tad on the boring side. In this lesson, I'll show you how to replace the period with the character of your choosing, whether it's a colon, a dash, a parenthesis or, gasp, nothing at all. Here I have a page with a basic ordered list. I don't declare a type, so standard decimals are used. And of course, there's a period after each number. Let's go to the CSS for this page, which is main.css file. I'm going to scroll to the bottom, where my only rule targeting the ordered list can be found, to add in a custom trailing character, I'm going to need to insert a new declaration.
To the OL rule and then add two more rules for the list items themselves let's start by ammending the existing OL rule. I'm going to put in a property called counter-reset and I'm going to give it a variable name. Item. The counter reset property identifies the variable that we're going to be using and resets it to one for the start of the ordered list. Next we'll need to set up the list item properly. So I'm going to create a new rule called main content LI. For the list item.
And the first thing we're going to do is set the display property to block. This will essentially remove all automatic numbering so that we can insert our custom values as a replacement. Next, I'll add a margin left value to move it to the right place. Let me hit a couple of extra lines just to move it up a tad. Finally, let's set up our replacement content. This is handled using the before pseudo selector, so our full selector reads Main Content, LI, before.
here we're going to set our display to in line block. Next we'll use the content property to write out the number we want, and the custom trailing character. So there's the content property. Now we'll use the keyword counter. And in parenthesis the variable item. Which we previously identified with the counter reset property.
And your recall it's called item. Right after that we'll put in quotes. Any content that we want to have, and the content we want to have is a closing parenthesis, followed by a space. Now close that declaration with a semicolon. Now it's time to increment our counter, with the cleverly named property counter increment. The value you give it is the name of the counter that you want to increment, and ours is Item. Finally, let's set the width of the entire pre-string to 1.5M and then position it with a margin left.
Equal to negative 2M. Let me save the page and now let's see how it looks in the browser. After I hit refresh, great, there is our closing parentheses after each number and there is not a period to be seen in our ordered list. You can use this same technique combining the counter reset content and counter increment properties to automatically number subsections of an ordered list as they do when legal documents.
I'll demonstrate that technique in the lesson styling nested list later in this chapter.
Get unlimited access to all courses for just $25/month.Become a member