Unordered list of hyperlinks - Match bullet color with link text color

Question

I have created a with all list items as hyperlinks.
What I want here is that the bullet color should match the color of the hyperlink depending on its status(visited or not visited).
I want to use only CSS. Is this possible? If I could also match the colors while hovering cursor over the link, it would be great.

Answer 1

Try this

li {
    color:red
}
a {
    color:red;
    display:block
}
li:hover, a:hover{
    color:green
}

DEMO

Answer 2

You can remove the standard bullet :

ul {
    list-style: none;
}

and re-create it in the a

a::before {
    content: "\2022";
}

now the style of the a includes the bullet

a:visited {
    color: red;
}

non desired effect: the bullet is underlined as it is now part of the a.

I think that could be overdone with more work, anyway.

demo in jsfiddle