Skip to content

Instantly share code, notes, and snippets.

@chrisyour

chrisyour/gist:4047680

Created November 9, 2012 19:27
Download ZIP

Revisions

  1. chrisyour revised this gist Nov 9, 2012. 1 changed file with 13 additions and 1 deletion.
    14 changes: 13 additions & 1 deletion gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    // Simple SCSS mixin for adding colored bullets to your <li> elements
    @mixin colored-bullet($color) {
    @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{
    @@ -12,3 +13,14 @@
    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;
    }
  2. chrisyour created this gist Nov 9, 2012.
    14 changes: 14 additions & 0 deletions gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    // Simple SCSS mixin for adding colored bullets to your <li> elements
    @mixin colored-bullet($color) {
    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);
    }