css inheritance background-color pseudo-class

How to use parent background-color on pseudo class

I have a tooltip on .progress and the tooltip has an arrow used pseudo class (:after). I want to use the tooltip background color on it's pseudo class.

I want to inherit <span> background on it's child (span:after) but I don't know how.
(maybe it is possible in JS or SASS so if anybody know help to solve)

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap Progress Bar Percentage</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
      .progress {
        overflow: visible;
        margin-bottom: 26px;
        height: 4px;
      }
      .progress .progress-bar {
        position: relative;
        border-radius: 4px;
      }
      .progress .progress-bar span {
        position: absolute;
        background-color: inherit;
        top: -20px;
        font-size: 10px;
        line-height: 10px;
        padding: 2px 3px 2px 4px;
        right: -1.4em;
        border-radius: 2px;
          filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.21));
      }
      .progress .progress-bar span:after {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: blue;
        border-width: 5px;
        margin-left: -5px;
      }
    </style>
  </head>
  <body style="width: 50%; margin: auto;padding-top: 20px">
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        <span>50%</span>
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
        <span>100%</span>
      </div>
    </div>
  </body>
</html>

Solution

You can't inherit the background-color to the border-color. But you can extend the Bootstrap bg-* classes with a border-color to get the possibility to inherit the color.

See the following code (with extended .bg-* classes and .progress-bar):

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css';

body {
  margin:auto;
  padding-top:26px;
  width:50%;
}
.bg-primary {
  border-color:rgb(0, 123, 255);!important;
}
.bg-secondary {
  border-color:rgb(134, 142, 150)!important;
}
.bg-success {
  border-color:rgb(40, 167, 69)!important;
}
.bg-danger {
  border-color:rgb(220, 53, 69)!important;
}
.bg-warning {
  border-color:rgb(255, 193, 7)!important;
}
.bg-info {
  border-color:rgb(23, 162, 184)!important;
}
.bg-dark {
  border-color:rgb(52, 58, 64)!important;
}
.progress {
  height:4px;
  margin-bottom:26px;
  overflow:visible;
}
.progress .progress-bar {
  border-color:#007bff;
  border-radius: 4px;
  position:relative;
}
.progress .progress-bar span {
  background-color:inherit;
  border-color:inherit;
  border-radius:2px;
  filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.21));
  font-size:10px;
  line-height:10px;
  padding:2px 3px 2px 4px;
  position:absolute;
  right:-1.4em;
  top:-20px;
}
.progress .progress-bar span:after {
  border:0 solid transparent;
  border-color:rgba(255, 255, 255, 0);
  border-top-color:inherit;
  border-width:5px;
  content:'';
  height:0;
  left:50%;
  margin-left:-5px;
  pointer-events:none;
  position:absolute;
  top:100%;
  width:0;
}

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%;">
    <span>20%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%;">
    <span>30%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;">
    <span>40%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;">
    <span>50%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
    <span>60%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%;">
    <span>70%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%;">
    <span>80%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;">
    <span>90%</span>
  </div>
</div>

In case you want to use the other .bg-* classes too you have to add the following to your CSS:

.bg-primary {
    border-color:rgb(0, 123, 255);!important;
}
.bg-secondary {
    border-color:rgb(134, 142, 150)!important;
}
.bg-success {
    border-color:rgb(40, 167, 69)!important;
}
.bg-danger {
    border-color:rgb(220, 53, 69)!important;
}
.bg-warning {
    border-color:rgb(255, 193, 7)!important;
}
.bg-info {
    border-color:rgb(23, 162, 184)!important;
}
.bg-light {
    border-color:rgb(248, 249, 250)!important;
}
.bg-dark {
    border-color:rgb(52, 58, 64)!important;
}
.bg-white {
    border-color:rgb(255, 255, 255)!important;
}