before&after

CSS에서, ::before는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

<article>
    <h2>case 1</h2>
    <div class="case-1">
        예시
    </div>
</article>

<article>
    <h2>case 2</h2>
    <div class="case-2">
        <p>예시</p>
    </div>
</article>
<style>
article {width: 500px; margin: 100px auto;}

.case-1 {border:  5px solid #000; width: 500px; position: relative;}
.case-1::after {content: '+'; width: 50px; height: 50px; background: rgba(0,0,0,.5); position: absolute; right: 0; bottom: 0;
font-size:  2em; text-align: center; color:  #fff; display: flex; justify-content: center; align-items: center; transition: .5s;}
.case-1:hover::after {width: 100%; height: 100%;}

.case-2{position: relative;}
.case-2::before, .case-2::after, .case-2 > p::before, .case-2 > p::after{
    content: ''; position: absolute;
    transition: 0.5s;
}
.case-2::before{
    left: 0; height: 0%;
    border-left: 5px solid #f00;
}
.case-2::after{
    right: 0; bottom:0; width: 0%;
    border-bottom: 5px solid #f00;
    transition-delay: 0.5s;
}

.case-2 > p{margin: 0;}
.case-2 > p::before{
    left: 0; top: 0; width: 0%;
    border-top: 5px solid #f00;
}
.case-2 > p::after{
    right: 0; bottom: 0; height: 0%;
    border-right: 5px solid #f00;
}

.case-2:hover::before, .case-2:hover > p::after{
    height: 100%;
}
.case-2:hover::after, .case-2:hover > p::before{
    width: 100%;
}
</style>

참고: ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, 나
등 대체 요소에 적용할 수 없습니다.

참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::before 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :before도 허용합니다.