I want to combine :after
with :hover
in CSS (or any other pseudo selector). I basically have a list and the item with the selected
class has an arrow shape applied using :after
. I want the same to be true for objects that are being hovered over but cant quite get it to work. Heres the code
#alertlist
{
list-style:none;
width: 250px;
}
#alertlist li
{
padding: 5px 10px;
border-bottom: 1px solid #e9e9e9;
position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
color: #f0f0f0;
background-color: #303030;
}
#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: "";
}
<ul id="alertlist">
<li>Alert 123</li>
<li class="selected">Alert 123</li>
<li>Alert 123</li>
</ul>
This question is related to
css
css-selectors
pseudo-element
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: "";
}?
Source: Stackoverflow.com