Created
November 9, 2012 19:27
-
-
Save chrisyour/4047680 to your computer and use it in GitHub Desktop.
Colored Bullets SCSS Mixin (works in IE 8+)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Simple SCSS mixin for adding colored bullets to your <li> elements | |
@mixin colored-bullet($color){ | |
list-style:none; | |
text-indent:-19px; // Adjust the text-indent to your specific needs based on your font-size and the typeface you're using | |
&:before{ | |
content:"\002022\00a0\00a0\00a0"; // Add a bullet character and three spaces before your <li> content starts | |
color:$color; // Add color to the bullet | |
} | |
} | |
// Usage | |
li{ | |
@include colored-bullet(red); | |
} | |
// Or, if you're not using SCSS, just write it out in plain old CSS | |
li{ | |
list-style:none; | |
text-indent:-19px; | |
} | |
li:before{ | |
content:"\002022\00a0\00a0\00a0"; | |
color:red; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment