Remove border-top in second line on hover - html

Question

Is it possible to get rid of border-top property in the second line of a list item on hover?
<ul>
<li>This is a<br/>long Link</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><span>This is a</span><br/><span>long Link</span></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.