One of the elements on my website is a div that resembles a speech bubble. The main part of the div is the bubble itself, while the :before element serves as the arrow pointing towards it. My goal is to create a hover effect in CSS where not only the main div changes upon hovering, but also the arrow.
Below is the code I have so far:
.sidebar_image_box_newsfeed_user_info_comments {
color: #ffffff;
background-color: #2f2f2e;
text-decoration: none;
-webkit-transition-property: background-color, color, text-decoration;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
}
.sidebar_image_box_newsfeed_user_info_comments:hover {
background-color: #3b3b3b;
color: #f3f3f3;
text-decoration: underline;
}
.sidebar_image_box_newsfeed_user_info_comments:before {
content:""; position:absolute;
bottom:-6px; right:0;
border-width:0 0 6px 6px;
border-style:solid;
border-color:transparent #2f2f2e;
text-decoration: none;
-webkit-transition-property: background-color, color, text-decoration;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
}