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?

enter image description here

<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

Thanks Paulie, but border top on li uses full width, i only want to display the border with the same width of the typo in — p2or, May 02 '14 at 13:57
@poor is that the same length as the top line of text or the widest line of text in the anchor? — Pete, May 02 '14 at 14:00
I think the only way to do that then would be to wrap the top line in a span as others have suggested but as you can't change your html directly you may have to use [a bit of js to do it](http://stackoverflow.com/questions/19038552/jquery-wrap-text-in-a-span-before-and-after-br-within-a-paragraph) - http://jsfiddle.net/peteng/T9xvW/12/ — Pete, May 02 '14 at 14:17
ok. will try that. I will check for a break, split it and wrap it. Thanks Pete — p2or, May 02 '14 at 14:23

score 1 · Accepted Answer · answered May 02 '14 at 13:54

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;}

score 1 · Answer 2 · answered May 02 '14 at 13:56

1

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

answered May 02 '14 at 13:56

demonofthemist

4,081
4
26
45

score 1 · Answer 3 · answered May 02 '14 at 13:58

1

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/

answered May 02 '14 at 13:58

Michelle

1,844
1
17
29

Tested it with same results. The items with a second line have a full width of the border. Here is a screenshot: https://imagizer.imageshack.us/v2/195x262q90/834/8wg0.png – p2or May 02 '14 at 14:10
I'm seeing you wanted the line just above the "typo" in but I'm not seeing a typo; is there something you left out? if you want the border to be over a specific part of the text in then that's a slightly different question. You'd need to specify the typo width somehow so you could target it. – Michelle May 02 '14 at 14:11
Thanks Michelle. Cant specify the width of the text because it should be a dynamic length. – p2or May 02 '14 at 14:16
Right, but are you trying to set the border on the words "this is a" specifically, no matter how they wrap on the line? Or are you trying to always target the first line of text no matter what words are on it? – Michelle May 02 '14 at 14:17
First Line would be nice, no matter how long it is. – p2or May 02 '14 at 14:22
Hmm. I'd say you could try ::first-line but unfortunately that doesn't apply to borders: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line I'd say you're going to have to wrap the text in a span as was suggested elsewhere. – Michelle May 02 '14 at 14:30
yes, also tried that. I will go for the wrap method. Thanks for your help Michelle. – p2or May 02 '14 at 14:40

score 1 · Answer 4 · answered May 02 '14 at 14:30

1

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

answered May 02 '14 at 14:30

injectilo

11
1

Michelle has found that this has no effect on Links. http://developer.mozilla.org/en-US/docs/Web/CSS/::first-line – p2or May 02 '14 at 14:42

Remove border-top in second line on hover

4 Answers4