Psuedo-element :: before не отображается

Question

Псевдоэлемент существует в DOM, но его не видно.

Я пытался поиграть со многими различными опциями, но я не вижу, что с ним не так. Элемент div заключен в пустой диапазон, где он вызывается.

style.scss

.tickBox {
  display: inline-block;
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-top: 8px;
  margin-right: 8px;
  background-color: $grey6;
  overflow: visible;

  &::before{ 
    content: '';
    position: absolute;
    top: .9em;
    left: -4em;
    width: 4em;
    height: .3em;
    background: $grey6;
    z-index: -1;
  }
}

tickbox.js

const TickBox = () => (
  <div styleName={'tickBox'} />
);

Круг галочки отображается правильнои когда я наводю курсор мыши на него в средстве просмотра элементов DOM, я вижу, что псевдоэлемент :: before находится там и имеет правильную форму, но он не отображается.

Answer 1

Проблема с z-index сделать его похожим на 999.

Answer 2

В данный момент вы не используете псевдоэлемент. Попробуйте эту настройку от .help-tip до .help-tip::after и дайте content: "" и

display: inline-block:
    .help-tip::after {
        content: "";
        display: inline-block;
        cursor: pointer;
        width: 10px;
        height: 10px;
        background-repeat: no-repeat;
        background-image: url("/assets/small-help-icon.gif");
    }