How to remove unwanted padding on anchor tag in the code given?
I have included link to codepen which displays a nav bar. On hovering any anchor tag, padding should be added to it only. Hover, the problem is the code is adding unwanted padding-bottom to all other elements too (which are not hovered).
I want to add padding only to the hovered element and not to every element of similar type.
Here is the link: https://codepen.io/anurag1989/pen/PoyQRJZ
Please suggest an edit.
2 Replies
Only the hovered element is getting the padding. However, as this increased padding inevitably affects the size of the parent element, all the other siblings are also being shifted.
I would probably code this differently but, without changing your css too much, if you remove the padding on the "a" selector and swap all the li:hover .back code to just use ´scale: 1.05;
that should get close to achieving what you want.
You could achieve the same effect without the need for the extra "back" element by using an outline on the \<a> element and increasing the outline-offset` on hover.
To get the "corners only" effect there are probably several ways to achieve this but, as per your codepen, this can be achieved using pseudo elements but, if set up correctly, there is no need to apply any hover effects to them.
I have put together a codepen based on your original one to demonstrate the idea using outline.
Bear in mind that there are a lot of hard-coded values in here which all depend on you keeping your fixed values width and heights for the buttons. Ideally all these values could be done using custom properties. I actually did do a version with custom properties but in the end I decided that it was over-complicating the solution for you at this stage.
https://codepen.io/cbolson/pen/dygdjLy?editors=1100Thanks for your valuable suggestion. I really learned a lot from this. The code works as expected with no error.