🔸 가상객체 알아보기

객체란 속성과 속성값의 집합을 객체라고 합니다.
예) h1태그는 여러가지 속성과 속성값을 가지고 있습니다. 따라서 h1도 하나의 객체입니다.
html문서에 직접 작성된 객체를 실존객체라 한다면, 가상객체는 html문서가 아닌 css에 만들어진 객체입니다.

    <ul>
        <li>항목1</li>
        <li>항목2</li>
        <li>항목3</li>
        <li>항목4</li>
    </ul>

ul::before{
    display: block; content: '첫번재 자식위치의 가상객체';
}
ul::after{
    display: block; content: '마지막 자식위치의 가상객체';
}
ul li:first-child{
    background-color: #ccc;
}

🔸 가상객체 만들기

가상객체는 css에서 만들수 있고, 특정요소의 자식형태로 만들수 있습니다.
가상객체는 특정요소의 첫번째 자식위치, 마지막 자식위치에 만들수 있습니다.

    <dl>
        <dt>용어태그</dt>
        <dd>설명태그1</dd>
        <dd>설명태그2</dd>
        <dd>설명태그3</dd>
    </dl>
    <div class="box">
        <span>Text</span>
    </div>

dl{
    outline: 1px solid blue;
    margin-top: 40px;
}
dl dt,dd{
    outline: 2px dotted deepskyblue;
    height: 40px;
    line-height: 40px;
}
/* dl의 첫번째 자식위치에 가상객체를 만듭니다. */
dl::before{
    display: block; content: 'dl의 가상 자식객체';
}
/* dl의 마지막 자식위치에 가상객체를 만듭니다. */
dl::after{
    display: block; content: 'dl의 가상 자식객체';
}
/* dl의 첫번째 자식 위치에 있는 dd태그를 선택하세요. 
첫번째 자식은 dt 이므로 선택적용 불능 */
dl dd:first-child{
    background-color: #ccc;
}
/* type:요소형태를 의미합니다. dt타입인지 dd타입인지 선택된 요소의 타입을 따릅니다.
dl의 자식요소중 type이 dd인 첫번째 요소를 선택하세요. */
dl dd:first-of-type{
    background-color: #ccc;
}

.box{
    margin-top: 40px;
    background-color: #ccc;
    line-height: 40px;
    width: 120px;
    text-align: center;
    position: relative;
    color: #000;
    transition: color 0.3s;
}
.box:hover{
    color: #fff;
}
.box span{
    position: relative;
    z-index: 2;
}
.box::after{
    display: block; content: '';
    /* 기본값은 auto이나 가상객체이므로 배경색상 적용이 안되어 보인다. */
    /* width: auto; height: auto; */
    background-color: #000;
    /* width: 100%;
    height: 4px;
    position: absolute;
    bottom: 10px;
    width: 0; */
    width: 0; height: 40px;
    position: absolute;
    z-index: 1;
    bottom: 0;
    transition: width 0.3s;
    right: 0;
}
/* 가상객체에 hover를 적용할때에는 클래스이름에 써야함 */
/* .box::after:hover{
    background-color: #f00;
} */
.box:hover::after{
    /* background-color: #f00; */
    width: 100%;
    left: 0;
        /* 좌표값의 기본값은 auto 이므로 다시 돌려줘야합니다. */
    right: auto;
}