Change color of CSS shape created by :after pseudo-element as its parent?

StackOverflow https://stackoverflow.com/questions/22438725

  •  15-06-2023
  •  | 
  •  

Question

I have some HTML and CSS that display "text message" bubbles. To create the bubble, a CSS class .bub is used. Then, using .bub:after, the triangle is built.

I'm having a hard time changing the color of the CSS shape created by :after pseudo element according to its parent color.

Goal:

To change the color of triangle which is created by div:after pseudo element. There will be a lot colors, so writing different classes for each color will be too cumbersome.

Here is the simplified CSS and HTML:

<!DOCTYPE html>
<html lang="en">
  <div id="container">
  <head>
  <style> 

.bub {
  width: 275px;
  display: table-cell;
  position:relative;
  padding:10px;
  margin:1em 0 3em;
  color:#fff;
  background:#075698;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.bub:after {
  content:"";
  position:absolute;
  bottom:-20px; 
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.bub.left {
  left: -100px;
}

.bub.left:after {
  top:16px;
  left:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:10px 40px 0 0; /* vary these values to change the angle of the vertex */
  border-color: transparent #333;
}

body {
  padding:0;
  margin:0;
  font:1em/1.4 Cambria, Georgia, sans-serif;
  color:#333;
  background:#fff;
}

#container {
  width:275px;
  padding:0 0 50px;
  margin:0 auto;
}

.blue {
  background: blue;
  border-color: blue;
}

.green {
  background: green;
  border-color: green;
}

.red {
  background: red;
  border-color: red;
}
    
  </style>
  </head>
  <body>
    <div class="content">
      <br><br>
      <div class="bub left blue">Test 1</div>
      <br>
      <div class="bub left green">Test 2</div>
      <br>
      <div class="bub left red">Test 3</div>
    </div>
  </div>
  </body>
</html>
Was it helpful?

Solution

If you mean to change the color of the shapes are created by ::after pseudo element;

Since you have set the border-color property on each .bub element, you could simply use inherit value for the :after pseudo element as follow:

.bub.left:after {
  border-color: transparent inherit;
}

WORKING DEMO.

From the MDN:

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top