Why before pseudo-tag not appearing in code?

I have the following CSS code:

#Top_bar #menu-home.menu-main li.menu-item a span:before {
content: "";
background: linear-gradient(to bottom, transparent 50%, rgb(254, 203, 8, 1) 50%);
}

But my before tag doesn't appear in the span element:

enter image description here

Only an after tag generated before.

How can I make my before tag appear? Thank you!

1 answer

  • answered 2019-05-30 21:31 Jan

    The :before and :after are placing the pseudo-element inside the parent. You need to expand the span-tag in the dev-tools/inspector to see them.

    #element:before {
      content: 'before';
      display: block;
    }
    #element:after {
      content: 'after';
      display: block;
    }
    <div id="element">element</div>

    Since you are placing them inside the span-element, they inherit its styles. Do make the (empty) pseudo-element visible in the browser you need to adjust its styles, like display: block etc. depending on the style/effect you want.