How to get hover efect only on part of the element?

Question

I have the below code:

 .container { padding-top:20px; } .container:hover { background-color: red; } .text { padding-top: 20px; } .container:before { content: 'before'; top: 5px; position: absolute; } 

 <div class='container'> <span class='text'> My text </span> </div> 

I needed the 'before' as a title so inserted it as a pseudo, moved up and created palce for it by adding padding to the div. Now when I hover over the div the pseudo gets highlighted as well, which I don't want.

AS it's a skin for external app I have very limited possibilities to add elements to dom, which is what I guess should be done. How can I highlight only bottom part of the div without the pseudo? Maybe there's a better way to style the pseudo itself so that it doesn't get hovered over? Pure CSS appreciated.

Answer 1

To prevent the background from covering the padding as well, add background-clip: content-box; to the .container :

 .container { padding-top: 20px; background-clip: content-box; } .container:hover { background-color: red; } .text { padding-top: 20px; } .container:before { content: 'before'; top: 5px; position: absolute; } 

 <div class='container'> <span class='text'> My text </span> </div> 

Or use margin-top: 20px; instead of the padding:

 .container { margin-top: 20px; } .container:hover { background-color: red; } .text { padding-top: 20px; } .container:before { display: block; width: 100%; content: 'before'; top: 5px; position: absolute; } 

 <div class='container'> <span class='text'> My text </span> </div> 

Answer 2

An simple solution is to use a margin-top on the container class instead of padding-top.

 .container { margin-top: 30px; background-clip: content-box; } .container:hover { background-color: red; } .text { padding-top: 20px; } .container:before { content: 'before'; top: 5px; position: absolute; } 

 <div class='container'> <span class='text'> My text </span> </div> 

Answer 3

You can try hover .text instead of .container and give "initial" or "transparent" background to the pseudo element.

Just my $0.02: I hope you understand that this whole thing is very strange, to say the least. It will limit any further customizations like font-height etc. Each time a new line of text will be added, you'll need to adjust padding or margin or top. Honestly, I don't understand what kind of app has such a strict skin that can't let you add an element.

Answer 4

Why not use descendant selectors? You can nest under :hover as well. And with display: block; no need to use fixed size margins and paddings either.

 .container:hover .text { background-color: red; } .text { display: block; /* or just use a div instead */ } .container:before { content: 'before'; display: block; } 

 <div class='container'> <span class='text'> My text </span> </div>