I have a tooltip applied to the .progress element, and the tooltip includes an arrow created using a pseudo-class (:after). I want the arrow to inherit the background color of the tooltip.
I am looking for a way to make the child element of <span> inherit the background color of its parent. If anyone knows how to achieve this, possibly through JavaScript or SASS, please help me solve it!
<!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>