A pseudo element to cover the parent

1

Hey,

I’m trying to implement this. I have the box div, and box:after pseudo element. I want the pseudo element to be on thop of the box div.

Why does not this work?

#box {
  background: pink;
  width: 200px;
  height: 200px;
  position: relative;
display: block;
}

#box:after {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  display: block;
  transform: translate(5px, 5px);
  
}

On codepen:
http://codepen.io/RycerzPegaza/pen/jyRRBE

2

You need a content property for your :after rule.

For me, adding: content: ''; worked just fine.

Edit:
I’ve never used these selectors, so I’ve been doing some reading since I saw your post. Here is a quote from a Smashing Magazine article on pseudo elements that supports what I found, you have to have a content property:

Secondly, without the content property, which is part of the generated content module in the specification, pseudo-elements are useless. So, while the pseudo-element selector itself is needed to target the element, you won’t be able to insert anything without adding the content property.

Article is here:

1 Like