fixed, before, after

따라다니는 유령:
position : fixed;
모든 태그에는 숨겨진 자식이 2개 있다
바로 before와 after!

ex) li 태그의 콘텐츠 뒤에 "님"자 붙이기
ul > li::after {
    content:"님";
}

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

body{
  margin:0;
  height:100vh;
}
div{
  position:absolute;
  height:50%;
  width:50%;
  background-color: red;
  transition:width 1s, height 1s;
  
}
div.a{
  top:0;
  left:0;
}
div.b{
  background-color: orange;
  top:0;
  right:0;
}
div.c{
  background-color: green;
  bottom:0;
  left:0;
}
div.d{
  background-color: pink;
  bottom:0;
  right:0;
}

div.a,div.d{
  width:0;
}
div.b,div.c{
  height:0;
}
body:hover>div{
  width:50%;
  height:50%;
  transition:width 2s, height 2s;
}