5.4 Get Creative With the List Bullets

Lists are extensively used in web design so styling them is something every developer should know. In this lesson, I'll show you how to use some previously learned techniques to add custom bullet points. So, to do that, I have three lists right here. And the first thing I wanna do is remove the default list style type. So, I'm gonna do this demo container ul. List, style type, none. Now that gets rid of all the bullets. All right. The first list we're gonna use an image to display on each list item. So, list-1, and this is how I have them numbered, list-1, list-2, and list-3. So list-1, list item, we'll do this background: url(bullet.png). bullet.png is an image I've already prepared. We'll set it to left center no-repeat. Okay. And let's also add a padding-left of 1m. And that will push the text to the right. So this is how you position them. Basically, each list item has the same background image position to the left and to the center vertically. If you want to alter the vertical position, instead of center you can do like maybe 0 just to see where it is and then start nudging them down, 5 pixels, 10 pixels, whatever you want. But normally you would just leave them in the center like this. All right, the second list will use some triangles as bullets. So, list-2 list item before, we'll use a pseudo element for this. We'll do this, content set to nothing. Display, we'll set it to inline-block because we need to set a height and a width. So height: 0. This is the same as the triangle example. Width will be set to 0. The only difference is we'll do things a bit differently on the border. So we'll set border-color, we'll use the two value notation, transparent and this. That means you get the transparent value for vertical and #111 for horizontal. Then we'll set the border style to solid. This is common to all borders. And then we'll set border width, let's see, we want the border to point to the right. So, top, bottom and left borders should have the same width. So 4 pixels top, 0 right, 4 bottom, and 4 left. Save and there it is. Let's also do a margin. Let's do a margin-right of 0.5 em, just push the text a little bit. And you can also tamper with the left-border width. Make it 6 pixels so that the small triangles have equal sides. Okay, perfect. Now for the third list we're gonna use circles. So, list-3, list item before content, again, set to nothing. And then, display set to inline-block. Oops, let's give it a background color of blue, so we can see them. We'll give them a width of about 6 pixels, a height, same value. And, what else? Let's make them round. That means border-radius, half of the width and height, so 3 pixels. And let's check it out. Okay, not bad. Let's add some margins to them. Top 0, let's see, right we'll do .5 m's. Bottom probably like 1 pixel so we can push it up, and 0 for left. And there you go. So three very simple bullet point types that you can apply to your own lists. And you can take this even further because you can show content in the pseudo-element, you can grab any kind of icon or symbol, just like I showed you in the custom radio button and check box video. So check out that lesson to see exactly what I'm talking about.