html - 更改 :before when :hover over main DIV?

Question

我有一个看起来像对话泡泡的 div。主要的 div 是气泡， :before 是箭头。我想要做的是，当您在 CSS 中翻转 :hover DIV 时，它也会更改 :before。

这是我的代码:

.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;
}

Answer 1

.sidebar_image_box_newsfeed_user_info_comments:hover:before {
   content: "I am new";
}

jsFiddle .