Menu
The :before and :after selectors in CSS is used to add content before and after an element. The :hover is pseudo-class and :before & :after are pseudo-elements. In CSS, pseudo-elements are written after pseudo-class.
#button:hover:before will change the pseudo-element in response to the button being hovered. If you want to do anything nontrivial to the pseudo-element only, however, you'd be better off putting an actual element into your HTML. Pseudo-elements are rather limited.
Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
::after (:after) In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Just append :after to your #alertlist li:hover selector the same way you do with your #alertlist li.selected selector:
#alertlist li.selected:after, #alertlist li:hover:after
{
position:absolute;
top: 0;
right:-10px;
bottom:0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #303030;
content: "";
}
in scss
&::after{
content: url(images/RelativeProjectsArr.png);
margin-left:30px;
}
&:hover{
background-color:$turkiz;
color:#e5e7ef;
&::after{
content: url(images/RelativeProjectsArrHover.png);
}
}
#alertlist li:hover:after,#alertlist li.selected:after
{
position:absolute;
top: 0;
right:-10px;
bottom:0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #303030;
content: "";
}
jsFiddle Link
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With