✏️웹개발을 배워보자 / transition , ::before ::after

transition

css에서
transition : 10s; 이와같은 형태로 쓰이는데 , 보통이면 실행시간이 0초라고 가정했을때
10초로 지연시키는것. (동적이게 만들수있다)

예시)

div{
	background-color:black;
    height:100px;
    width:50%;
    transition:2s;
}
div:hover{
	width:100%;
    transition:width 1s;
}

div를 마우스오버시 width 50%에서 100%로 늘어나는데 1초,
원래상태로 돌아오는데 transititon:2s;(2초)

::before , ::after

• 앞 , 뒤에 추가한다.
  예) content 사용하여 앞,뒤에 텍스트 추가하기

<ul>
  <li>천명진</li>
</ul>

ul > li::before{
	content:"저는";
}
ul > li::after{
	content:"입니다";
}

결과값