伪元素 ::before 不显示

Question

伪元素存在于DOM中，但不可见。

我试过摆弄许多不同的选项，但我看不出有什么问题。 div 元素被包裹在一个空的 span 中，并在其中被调用。

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

您目前似乎没有使用伪元素。试试这个设置 .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");
    }

Answer 2

问题在于z-index 使它像999。