여기까지 하면 CSS가 웬만큼 적용된 상태지만, 추가로 몇 가지 속성을 더 적용하겠습니다. 13.10.1 텍스트 타이핑 효과 구현하기에서 메인 화면의 글자가 지워졌다가 다시 채워지는 기능을 넣을 예정입니다. 그래서 미리 다음 코드처럼 메인 화면 텍스트의 끝에 커서 모양을 만들어 줍니다.

main h2 span::after{
  content:"";
  height:40px;
  width:3px;
  background-color:#fff; 
  display:inline-block;
  animation:blink .7s ease-in-out infinite;
}
@keyframes blink{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}

커서 모양을 만드는 원리는 간단합니다. ::after 가상 요소 선택자로 텍스트 마지막에 너비 3px, 높이 40px 크기의 배경색이 투명한 막대(bar)를 만듭니다. 그리고 애니메이션을 넣어서 막대 부분이 커서가 깜빡이는 것처럼 보이게 구현합니다.

그림 13-6 커서 모양을 만들기 위한 막대 표시