как можно до и после наследовать цвет от родителя через атрибут тега

Question

Я использую bootstrap 4 и sass. Итак, у меня есть HTML-тег с цветом, установленным через тег span, как это ...

<div class="non-semantic-protector">    
   <span class="badge badge-primary">testing</span>
</div

В моем sass, как мне сделать так, чтобы человек изменял цвет для тега из html (например, с первичного значка на опасный знак), my: before и: после использования того же цвета, введенного в через тег?

Вот мой нахальный код ...

.non-semantic-protector { position: relative; z-index: 1; }

span.badge {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0.5em 1em;
}

span.badge {
  &:after, &:before {
    content: '';
    position: absolute;
    border-style: solid;
  }
  &:after, &:before {
    top: 0em;
    right: -1em;
    border-width: 1em 1em 1em 3em;
    border-color: currentColor transparent currentColor currentColor;
    z-index: -1;
  }
}

Я пытаюсь использовать currentColor, но все, что я получаю, это белый вместо начальной загрузки синий. Как я могу сделать так, чтобы пользователь мог использовать цвет начальной загрузки, а мой после и до автоматически подобрать этот цвет?

Answer 1

В соответствии с spec , currentColor является значением свойства color.

В Bootstrap 4 стили для класса badge-primary:

.badge-primary {
    color: #fff;
    background-color: #007bff;
}

Таким образом, в этом контексте currentColor равняется #fff, который является данным значением цвета для этого элемента.

К сожалению, вы не получите синий цвет Bootstrap бесплатно, если только вы специально не попросите что-то подобное в ваших ::before или ::after псевдоэлементах:

.badge-primary::before {
    background-color: inherit;
}