When I hover over a tag, it's sibling's psuedo element changes everywhere?

[lucibat]

When I hover over a tag, its siblings psuedo element changes its width in more than the specified tag that Im currently hovering over. How do I fix this?

Basically theres a little red block an:before that I want to expand when I hover over its parents sibling qu. And it does, but if I hover over ONE qu tag, every tag beneath it also activates the psuedo element.

P.S The an tag must remain the parent.

<qu> Maecenas interdum eleifend massa eget tincidunt.</qu>
<an>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</an>

<qu> Maecenas interdum eleifend massa eget tincidunt.</qu>
<an>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</an>

qu{
margin-left:4%;
margin-right:4%;
display:block;
font-family:open sans;
letter-spacing:1px;
font-weight:600;
line-height:18pt;
text-transform:uppercase;
color:black;
font-style: italic;
margin-bottom:20px;
position:relative;
}

an{
font-family:source sans pro;
font-size:18pt;
letter-spacing:0.1pt;
line-height:28pt;
font-weight:100;
position:relative;
color:#565656;
display:block;
margin-bottom:70px;
}

an:before{
content: "";
width:20px;
  background:red;
  height:10px;
position: absolute;
}

qu:hover ~ an:before{
width:100px;
}

You can see it in motion here: https://codepen.io/kitglitch/pen/rqbPOq

[Beverleyh]

I think you’re looking for the adjacent sibling selector https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Also, why are you inventing your own qu and an elements and not using standard HTML elements?

[lucibat]

Thankyou. Id rather use my own instead of using the italic/bold tags because i want them to maintain their individuality if i were to use them later on

[Paulie_D]

You should be aware that custom elements may not be recognised by browsers unless you know exactly how to enable them.

It’s not as simple as just using special names.

[Author]

Posts