From the course: CSS Shorts

Triangle bullets - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Triangle bullets

“

- 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.

Contents