CSS - before/after 속성으로 div나 이미지 등 객체 밑에 그라데이션 넣기

<div class="aaa"> <!-- 부모객체 -->

   <div class="bbb"> <!-- 자식객체 -->

      이미지 등 내용 표시되고있을때, 

   <div>

</div>

 

 

.aaa{

   position: relative;

}

.bbb:before {

   position:absolute;

   bottom:0;

   content:" ";

   width:100%;

   height:15px;

   background:   linear-gradient( to bottom, #00000000, #000000cc);

}

 

이렇게하면 굳이 새롭게 div 만들고 어따가 놓고 이름짓고 할 필요 없이 얕은 그라데이션이 생긴다.