Multiple pseudo elements

[donboe]

I have a div content for which I use the the following before and after pseudo elements to have duck tape effect on the top left and right hand corners.

#content:before, #content:after{
  content: '';
  display: block;
  position: absolute;
  background-color: rgba(220,212,176,0.85);
  height: 3em;
}

#content:before { 
  left:-.6em;
  top: -1em;
  width: 4.5em;
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
}

#content:after { 
  left: 90%; 
  top: -10px;
  width: 6em;
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
}

This is working ok, but I need another effect on the right bottom corner. How do I add multiple before and after pseudo elements to a singe div?

[pr0c3ss]

Not sure if that’s possible. Why don’t you make the container position relative and put an absolute bottom 0 right 0 element in

[PaulOB]

@donboe

This is working ok, but I need another effect on the right bottom corner.

You can’t add any more to that element.

Are there any inner elements that you could use :after with instead ?