How to combine pseudo-selectors :: after and: not
I have the following SASS code:
section.post {
a {
transition: all $aside-animation-time;
&::after {
position: absolute;
bottom: -.5px;
left: 0;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid $primary-color;
}
&:hover {
border-color: $hover-color;
}
}
}
What I'm doing here is adding a blue bottom border for all links. However, I noticed that when I use anchor labels with images inside, the image also has a border (since this is also a link). Now my goal is to add anchor styles to text links only.
I tried to use :not(img)
by binding it to ::after
, overriding previous rules, etc., but nothing worked as expected. Any help would be appreciated.
source to share
Currently CSS does not have the ability to style a parent element based on any child elements. If you simulated an image with a link yourself, everything would be fine.
You might be able to use something like jQuery to add a class to any links that contain child images:
$('a:has(img)').addClass('has_img');
Then you can use this with your CSS: not as in
section.post {
a:not(.has_img) {
transition: all $aside-animation-time;
&::after {
position: absolute;
bottom: -.5px;
left: 0;
width: 100%;
height: 0;
content: '';
border-bottom: 1px solid $primary-color;
}
&:hover {
border-color: $hover-color;
}
}
}
source to share
Maybe this will help you.
a {
display: block;
height: 2.5em;
position: relative;
&:after {
border-bottom: thin solid blue;
bottom: 0;
content: '';
left: 0;
position: absolute;
width: 100%;
}
&:hover:after {
border-bottom-color: red;
}
img {
display: block;
height: inherit;
position: relative;
z-index: 1;
}
}
Fast coding example: http://codepen.io/vkjgr/pen/WvMGRK
source to share