CSS onhover the caret part of a full CSS chat bubble

Question

Working on a chat bubble:

.bubble {
    display: inline-block;
    position: relative;
    width: 35px;
    height: 20px;
    padding: 0px;
    background: rgb(219, 218, 218);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    border:rgb(107, 107, 107) solid 2px;
}

.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 6px 5px 0;
    border-color: rgb(219, 218, 218)  transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -5px;
    bottom: -6px;
    left: 43%;
}

.bubble:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 7px 6px 0;
    border-color: rgb(107, 107, 107) transparent;
    display: block;
    width: 0;
    z-index: 0;
    margin-left: -6px;
    bottom: -9px;
    left: 43%;
}

.bubble:hover {
    background-color: red;
}

<div class="bubble"></div>

The onhover is currently not working for the caret part of the chat bubble. The desired result is obviously the whole chat bubble being filled up when there is an onhover event. I tried (not a CSS wiz):

.bubble:hover,  .bubble:hover:before, .bubble:hover:after{
    background-color: red;
}

I also tried a lot of different stuff but it doesn't seem to work. How do I fix this?

as a side note, you can use only one pseudo element to achieve this, here is an idea https://stackoverflow.com/questions/47956092/html-css-triangle-with-pseudo-elements/47956145#47956145 — Temani Afif, Mar 21 '18 at 21:36

score 4 · Accepted Answer · answered Mar 21 '18 at 21:34

You just have to add

.bubble:hover:after {
  border-color: red transparent;
}

because the small triangle is actually the border of the :after element.

.bubble {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 20px;
  padding: 0px;
  background: rgb(219, 218, 218);
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  border: rgb(107, 107, 107) solid 2px;
}

.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px 5px 0;
  border-color: rgb(219, 218, 218) transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -5px;
  bottom: -6px;
  left: 43%;
}

.bubble:before {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 7px 6px 0;
  border-color: rgb(107, 107, 107) transparent;
  display: block;
  width: 0;
  z-index: 0;
  margin-left: -6px;
  bottom: -9px;
  left: 43%;
}

.bubble:hover {
  background-color: red;
}

.bubble:hover:after {
  border-color: red transparent;
}

<div class="bubble"></div>

score 1 · Answer 2 · answered Mar 21 '18 at 21:35

Maybe simply this:

.bubble:hover::after {
      border-color: red  transparent;
    }

.bubble {
display: inline-block;
position: relative;
width: 35px;
height: 20px;
padding: 0px;
background: rgb(219, 218, 218);
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:rgb(107, 107, 107) solid 2px;
}

.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 5px 0;
border-color: rgb(219, 218, 218)  transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -5px;
bottom: -6px;
left: 43%;
}

.bubble:before {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 6px 0;
border-color: rgb(107, 107, 107) transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
bottom: -9px;
left: 43%;
}

.bubble:hover {
    background-color: red;
}
.bubble:hover::after {
  border-color: red  transparent;
}

<div class="bubble"></div>

CSS onhover the caret part of a full CSS chat bubble

2 Answers2