Is this possible without introducing Javascript or adding to the HTML? - html

Question

My client wants every link list, that is, every list of the form
<ul>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
</ul>
to have the bullets of the list be the same color as the linked text, but every non-link list, that is, every list of the form
<ul>
<li>Here's a regular list item</li>
<li>Here's a regular list item</li>
<li>Here's a regular list item</li>
</ul>
should have its bullets and corresponding text inherit as usual.
Fiddle: http://jsfiddle.net/0kkc2rz4/
I am constrained by not being able to add classes into the HTML, so something like
<ul class='link-list'>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
</ul>
ul.link-list li { color: #004E98; }
is out of the question, although I realize that's the obviously best way to do it if I was coding the site from scratch. I can add JS, but would prefer not to.

Answer 1

Here's a solution using a pseudo element and the unicode character for bullet points. The basic idea is to 'overlap' the a bullet over the li bullet, giving the effect that they are different.
ul{
margin:0em;
padding:0em;
list-style:none;
padding:20px 20px 0px 20px;
font-family:sans-serif;
}
li{
margin:0em;
padding:0em;
padding-bottom:10px;
}
a{
color:red;
text-decoration:none;
}
a:hover{
color:green;
}
a, li{
position:relative;
}
a:before, li:before{
content:'\2022';
position:absolute;
left:-0.5em;
color:inherit;
}
<ul>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
<li>
Here's a regular list item
</li>
</ul>

Answer 2

Playing a bit with pseudolements: http://jsfiddle.net/2acw2hae/1/
ul { list-style: none; }
ul a { position: relative; }
ul a:before {
content : "\25CF"; /* unicode for black circle */
font-size: 0.75em;
margin-right: .5em;
}
/* this overlaps the text-decoration under the bullet */
ul a:after {
content : "";
position: absolute;
bottom: 0; left: 0;
height:4px;
width: .5em;
background: #fff;
}
Result