ul{
list-style-position: outside;
}
ul{
list-style-position: inside;
}
Video Summary
So here we’re talking about LIS styled positions. And basically what this means is where do we want these bullet points to be at? The default version is the outside version. And basically what we’re saying is is that all of these bullets are outside the text. So if the text that we have for this list goes on to a second line, it stays within like right below the first letter of the list. So blue is right under color, but if we wanted it inside, what we’re saying is, is that all the bullets are going to be are going to have the ability to be inside. So just imagine this is where instead of having all the text right here, the biggest opposition is on the inside. So that means that if the sentence goes too far and it goes to a second line, the next line will be under this bullet point.
And you might run into this situation if you’re doing certain lists or certain outlines and you want it to look like this or potentially someone may have made your list for your theme for your WordPress site as an inside and you do not want to use less and you wanted to get back to the default. So this is how we’re going to set this up. Let’s hop or over. Let’s hop over to code pen and start playing around with this. So what we’re looking at here is I have a unordered list and I just put in three words example example examples, so we can understand this. i If you look over here to the CSS code, I made the font size 40. I put a border around this so we can kind of see a little bit better of what we’re looking at. And I made the width 300 pixels wide, because we wanted this. This word to go on to the second line. And we didn’t I didn’t really want to have a ton of words or a huge drawn out sentence he wanted. I want to keep this simple and clean. So if we put an outside, it doesn’t do anything because that’s the default. What happens we put this on the inside right? So basically we just moved the icons or the bullets over from over here to here. So now that way, when this word goes out, or then the words go on to the second line, they are right under the bullet. So personally, I would rather have all my list style positions as outside. I think it’s just a cleaner look. But there might be a situation where you might want to have your list look like this. Or like I said before, maybe someone made your lists, or styled your lists like this and you wanted to refer back to the defaults, which we are going to use outside And we are back to normal. So that is a list position. so let’s hop over, and learn the next section.