Rob Allred

Developer, Outdoor Enthusiast & Purveyor of Odd Things. AngularJS, Javascript, ASP_NET, OrchardCMS.

  • Twitter

Different color list-style and text of list items using CSS

Posted on June 26, 2016

CSS
So I ran into this issue recently, and wanted to put it up on my blog to remember. If it helps someone else, that is cool too!

Many times when end users would like their list items to have a different color than the character used in the list-style-type, it has been suggested to put the text in a span and over load the span, add a class to the span or inline the style change.

1
2
3
ul > li > span{
    color: orange;
}

I ran across a way to do it in just css and it lets the end user avoid using span or inline syles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ul {
    list-style: none;
    padding:0;
    margin:0;
}
 
li {
    padding-left: 1em;
    text-indent: -.7em;
}
 
li:before {
    content: "• ";
    color: orange;
}

I saw this on a stack over flow question here

The basics of the method is to remove the list-style, adjust and add the content with color change before the list item. Pretty simple and clean for end users to just keep on moving and not worry about formatting the list items.

happy styling.

Filed Under: CSS Tagged With: Code Snippets, CSS, how to

Categories

  • Accessibility (1)
  • anjularjs (5)
  • Asp.Net (3)
  • CSharp (2)
  • CSS (1)
  • Database (3)
  • Github (1)
  • Html5 (1)
  • javascript (11)
  • Linq (1)
  • Orchard Cms (9)
  • Regex (1)
  • SQL (1)
  • Uncategorized (1)
  • Videos (4)
  • vuejs (1)
  • Web Api (2)

Recent Posts

  • Commonly used regex for zip codes and addresses
  • Delete all the tables from your database
  • Orchard CMS Content Control Wrapper
  • Orchard Harvest 2017
  • Sending Emails in a Asp.net WebApi

Copyright © 2014