I am struggling with the following html code:
<div class="content">
<h2><a href="#">Hero</a></h2>
<h2>Hero</h2>
<div class ="tricky"></div>
</div>
The "content" is a flex container and "tricky" is another flex container with pseudo elements before and after that I want to use for hover effects on the link. The CSS for tricky includes .tricky::before{...} and .tricky::after{..}, both set to square width with visibility: hidden.
I want these pseudo elements in "tricky" to change (ex: visibility, color, width, height) when the link is hovered over. I have tried using selectors like
.content a:hover ~ .tricky:before { ... }Any assistance would be greatly appreciated. Thank you!
Here is my setup: I need to modify the styles of the "tricky" element's pseudo elements - ":before" and ":after" when the anchor tag is hovered over.
*{
padding:0;
margin:0;
}
.content{
position:relative;
top:200px;
left:300px;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
width:150px;
height:150px;
background:transparent;
overflow:hidden;
border-radius:20px;
}
/* Other CSS here */
<!DOCTYPE html>
<html lang="en" dir="ltr">
<link href="test.css" rel="stylesheet"/>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="content">
<h2><a id ="ida" href="#">Hero</a></h2>
<h2>Hero</h2>
<div class ="tricky">
</div>
</div>
</body>
</html>