Remove border-top in second line on hover

Question

Is it possible to get rid of border-top property in the second line of a list item on hover?

<ul>
    <li><a href="#">This is a<br/>long Link</a></li>
</ul>

• Display:block causes the border has the same width like the whole element
• Display:inline-block causes nearly same results

Starting Fiddle

---

By the help of @Pete and the others I ended up with this:

$('#access a').each(function() {
    $(this).contents().filter(function() {          
        return this.nodeType == 3; 
    }).wrap('<span></span>');
});

to simply wrap the <li> contents with <span> elements:

<!-- with the javascript -->
<nav id="access" role="navigation">
   <ul id="menu-primary" class="menu">
     <li class="menu-item">
      <a href="http://www.url.com"><span>Hello</span><br/><span>World</span><a/>
    </li>
  </ul>
</nav>

This makes it possible to create a hover only for the first span element of the li element:

.mainmenu ul a:hover span:first-child {border-top:1px dotted #fbf9ef;}

Pete's Fiddle

Answer 1

you can separate the two line with span tag

<ul>
    <li><a href="#"><span>This is a</span><br/><span>long Link</span></a></li>
</ul>

then make this in css :

a:hover span:first-child {border-top:1px solid}
a:hover span:last-child {border-top:none;}

Answer 2

Add your first line in <span> & use this code a:hover span{border-top:1px solid;}

Answer 3

I'm not sure I understand what you mean if inline-block isn't working for you; this worked for me:

a {
    display:inline-block;
    text-decoration:none;
    vertical-align:text-top;
}
a:hover {
    border-top:1px solid; 
    display:inline-block; 
}

http://jsfiddle.net/kK2bf/

Answer 4

You can use the pseudo-element ::first-line.