A brief history of styling list items.
With Google's announcement of the new marker attribute yesterday I thought it would be a good time to recap some if the "oldschool" ways of formatting list items. I don't feel any certain way about the new attribute, but in a sense it does add complexity by creating a new syntax for doing something that could be hacked together with a little ingenuity for the last 10 years or so. Then again that's sort of always the case with progress, so I can't be too upset about it as long as the other browsers end up supporting it in due time.
Old Method #1: the list-style attribute
This method works by adjusting the lesser known list-style attribute. You are a bit limited here in your options, but you can use an image which can definitely be helpful if you have a unique design in mind. I would recommend adjusting list-style attributes if you don't want to mess around with your design too much and want a quick and easy cross browser solution.
Here are a few examples:
Example #1
- One
- Two
- Three
Notice you can change the content of the bullet to be any character. Also you have two options for position, outside, or inside. Outside will place the bullet outside of the bounding box of the element while inside will place it right at the inside of the bounding box of the element.
Example #2
- One
- Two
- Three
Notice that you will have to size the image manually to match your design. Also you cannot control the color of the bullet easily with this method so if you're looking for something more complex, see below.
Old Method #2: pseudo elements
Psuedo elements are extremely common but I feel they are often overlooked in beginner CSS tutorials. So here's a quick explanation if you're late to the party: all elements with a closing tag (div, span, etc...) are allowed to have a :before and an :after psuedo element.
You can consider these things to be sort of like well... "pseudo elements" or "half elements". They are very helpful for design purposes but generally shouldn't be used to render any meaningful content.
A great design purpose for a pseudo element is as a bullet in a list item. This method starts by stripping away the default list item styling on the ul tag, giving you the freedom to replace it with a psuedo element of your own design.
Example #1
- One
- Two
- Three
Notice that with this method you have full control over the design of your bullet. You can add hover attributes, transitions, animations, box shadows, background images or gradients etc... This makes it a much more powerful and flexible way to build out your list items if you have an intricate design.
Also note that all psuedo elements must have their content set. If you do not set the content of a pseudo element, it will not be rendered.
Example #2
- One
- Two
- Three
Your content doesn't have to be empty. You can add any character you like in your pseudo element.
Conclusion
Before the ::marker selector we've had quite a bit of control over our list items. The new attribute makes it a bit more convenient to accomplish this task, but, like all syntactic sugar it's probably best to know your history so you can understand how we got here in the first place.
