Psuedo-element ::before is not displaying

user_2770632 0
Viewed 65

The pseudo-element exists in the DOM, but it is not visible.

I've tried fiddling with many different options but I don't see what is wrong with it. The div element is wrapped in an empty span where it is called.

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'} />
);

The tickbox circle is displayed correctly and when I hover over it in the DOM element viewer I can see that the ::before pseudo element is there and in the correct shape, but it is not displaying.

reactjs sass css
2 Answers

The issue is with z-index make it like 999.

user_113933810

You don't seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving content: "" and 

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");
    }
user_122377630
Related