CSS - Transform Scale - Pseudo elements

show it does not effect placeholder in DOM

by Ben Clayton

HTML

<div class="box">
</div>
<div class="box">

</div>

CSS

.box {
  display: inline-block;
  position: relative;
  border: 1px solid red;
  width: 200px;
  height: 200px;
  margin:30px;
}

.box {
  transform: rotate(45deg); 
  /* transform: scale(0.6, 0.6);*/
}



.box:after {
  content: '>';
  position: absolute;
  right: -15px;
  top: 50%;
  margin-top: -8px;
}

.box:before {
  content: '<';
  position: absolute;
  left: -15px;
  top: 50%;
  margin-top: -8px;
}

.box:hover {
  background-color: #808080;
}