CSS: :Before: :After Pseudo-Element of Class Not Working

CSS :before and :after not working?

If you want :before and :after to work, you need to give them content, otherwise they don't really 'exist'. The easiest thing to do is, in the css, set content: '' for both pseudoelements.

:before pseudo class not working

Your other rules override this rule, you should add display property, for example:

.vc_tta-panels #adsl .vc_tta-panel-body:before {
    content: 'text goes here';
    display: inline;
}

why this pseudo class selector is not working?

For the :after pseudo-element to show up you need to give it content and display it as a block.

Then, absolutely position the :after and relatively position the div itself:

.w3c div div > div {
    position: relative;
    border: 1px solid red;
    float: left;
    width: 180px;
    height: 110px;
    margin-left: 10px;
}

.w3c div div > div:hover:after {
    display: block;
    content: '';
    position: absolute;
    border: 1px solid black;
    width: 178px;
    height: 108px;
}

CSS pseudo-element ::Before does not work

Is there an element outside of of the .image div in your test page? I can see the ::before if I do that.

#home .image::before {
  content: 'asdasd';
  height: 100%;
  width: 100%;
  background: rgb(92, 226, 43);
  position: absolute;
  top: -16.8%;
  left: 16.7%;
  z-index: 1;
}

<div id="home">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1lcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="Código de Programação" />
  </div>
</div>

CSS3 ::after pseudo selector is not working

You have to add display:block; for the pseudu element to work. Also try to change your position to absolute for top and left properties.

pseudo class before with background colour not working safari

The problem seems to be that Safari is taking the rotation as being in 3d.

As the default origin for such transforms is along the central x axis half the background is towards the viewer and obscures the bottom of the text.

I don't know why the 2d/3d treatment differs in the two browsers.

A workaround may be to have the pseudo element rotate around the bottom (but with a reduced angle).

#test {
  position: relative;
  perspective: 240px;
  width: 500px;
}

#test p {
  position: relative;
}

#test::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -5px;
  left: -10px;
  right: 0;
  line-height: 27px;
  border: 1px solid #D4E7D1;
  background: #E4F7E1;
  border-radius: 5px 5px 0 0;
  transform: rotateX(22deg);
  transform-origin: center bottom;
}

<div id='test'>
  <p>Test </p>
</div>

---

Related Topics