CSS Property Value How to - after: Use after class to add border to create shadow effect








Question

We would like to know how to after: Use after class to add border to create shadow effect.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#myDiv {<!--   ww  w.j  a  v  a  2s . c  om-->
  height: 50px;
  width: 60px;
  border: 2px solid #000;
  position: relative;
  background-color: #fff;
}

#myDiv:after {
  content: "";
  z-index: -1;
  position: absolute;
  left: 5px;
  top: 5px;
  display: block;
  width: 100%;
  height: 100%;
  background-color: red;
}
</style>
</head>
<body>
  <div id="myDiv"></div>
</body>
</html>

The code above is rendered as follows: