Bullets don’t have to be boring. You can modify them with CSS without changing any of the HTML in your page. Learn how to transform your plain round bullet shape and color into triangles for an unordered list. All this can be done with modifying some of the
- Hi, this is Chris Converse, and in this episode we'll transform the bullets of an unordered list into triangles without modifying the HTML of our page. So if you'd like to follow along, download the exercise files, and let's begin by opening the HTML file in a text editor. So once you have the HTML file open up in the head area, you'll see a link to style.css, we'll be opening this in a moment. Inside the body area, we have a header and an article. Inside the article we have the standard unordered list. So we have a <ul> and a series of <li>s.
So to begin transforming our bullet list, let's go back to the exercises files, and let's open up style.css in our text editor. And now once you have the css file open, let's scroll down to the bottom, after the article rule, let's come in here and first take away the list style of the unordered list. So we'll type ul, space, put in our brackets, and the property we're going to use is going to be list style, so list-style, colon, space, let's set this to none, then a semicolon.
If we save our CSS we'll now see in the browser we no longer have bullets. Back in the CSS, let's come back and now create a rule that's going to target the list items. So we'll type li, put in our brackets, split this open, the first property for the individual list items is going to be position, we're going to set this to relative, and then we'll add one more property for the list item, and that will be padding. So padding, colon, space, we are going to set 0 for the top, zero for the right, 10 pixels for the bottom, and then zero for the left.
And then with this in place, I'll scroll down a little bit and we're ready to add our pseudo elements. So we start with a list item, so li, two colons, then the word before, let's add in our brackets, hit a few returns, split that open, first property is going to be content, so content, colon, space, we're going to leave this blank, so two single tick marks and a semicolon. Next property is going to be display, we're going to set this to a block.
Next property is going to be the width, we're going to set this to zero, so 0px. Next property is going to be the height, we're going to set this to zero pixels as well. Then, for the next property we're going to set a border style, so border-style, colon, space, we're going to set this to solid. The next property is going to be border color, so border-color, we're going to set this to transparent for the top and bottom, then space, and then we're going to set an orange color for the right and left.
So for the color we're going to use a #e4a150. Next property we're going to set the border width, so border-width, we're going to set five pixels for the top, then space, zero for the right, five pixels for the bottom, and 12 pixels for the left. So with these in place we can hit save. We'll now see our triangles showing up above the text of each list item. And so now the final thing we need to do is position these pseudo elements.
So after border width, I set the position property, so position, colon, space, we'll set this to absolute. Next line we'll set the top property to .3em, and then the left property to -1.4em. So with these in place, save your CSS, go back to the browser and hit reload, and you can see by using only CSS, we're able to turn the standard bullet shapes into triangles. And so with that I conclude this episode and as always, thanks for watching.
Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.