html - How to make the bullets of an unordered list have different text-decoration than the list items -

html - How to make the bullets of an unordered list have different text-decoration than the list items -

what need: list items underlined , different color bullet points, should not underlined

what i've tried:

a scenario of issue http://jsfiddle.net/g7fgy70c/

html (can't alter construction because i'm working through cms)

<ul> <li><a hfref="http://www.google.com">this should underlined, bullet before should not be</a></li> <li><a hfref="http://www.google.com">this should underlined, bullet before should not be</a></li> <li><a hfref="http://www.google.com">this should underlined, bullet before should not be</a></li> </ul>

css

ul { list-style-type: none; } { text-decoration: underline; } li > a:before { content: "\002022"; color: red; padding-right: 5px; /* text-decoration: none; not work, bullets still underlined */ }

target li not li >a : http://jsfiddle.net/g7fgy70c/3/

li:before { content: "\002022"; color: red; padding-right: 5px; }

html css