4

My client wants every link list, that is, every list of the form 

<ul>
    <li>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </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>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </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.

Improve this question
3
  • 1
    Say what you are trying to do in the title of the question. Commented Apr 2, 2015 at 16:15
  • Here's the answer to your question: stackoverflow.com/questions/1014861/… - summary: as of right now, this is not possible to do with pure CSS Commented Apr 2, 2015 at 16:16
  • Are you able to add Font Awesome (fortawesome.github.io/Font-Awesome) ? If so it will be helpful Commented Apr 2, 2015 at 16:29

2 Answers 2

Reset to default
6

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>
        <a href="www.google.com">Here's a link</a>  
    </li>
    <li>
        <a href="www.google.com">Here's a link</a>          
    </li>
    <li>
        Here's a regular list item       
    </li>
</ul>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

So is there no way to do this without re-creating the bullet (essentially) with :before selectors? This seems to just be another situation of needing to select a parent of something, which can't be done in css. I was hoping to see a weird solution that might involve something like the :not selector, but I don't think there is one.
@ferr not that I know of, unfortunately. Behind the scenes the browser is ultimately just doing the same thing: adding a • :before each list item. This just does the same thing to the a tag and overlaps them. We just need to do it again for the li for cross-browser normalizing.
1

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

enter image description here

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.