I'm encountering an issue with a piece of code that is not working as expected. The problem seems to be specifically with the after element. The desired behavior is for two lines to draw from the top left corner and the bottom right corner when hovering over the heading. However, currently both lines start in the top left corner but end up in the right corners.
Although the code appears correct, it still doesn't function properly.
Here's a reference link to the Fiddle
Pay attention to the differences between the before and after elements when they are hovered over. Initially, they are positioned where their line will exit the block. Upon hover, they move to the opposite side as intended.
h1:before{
bottom: 0;
right: 0;
}
h1:hover:before{
top: 0;
left: 0;
}
h1:after{
top: 0;
left: 0;
}
h1:hover:after{
bottom: 0; /*not working*/
right: 0; /*not working*/
}