before & after

::before 요소 내용 앞쪽에 새 컨텐츠를 추가.
::after 요소 내용 끝에 새 컨텐츠를 추가.

위처럼 양쪽 끝에 만들어낼 수 있다.

https://blogpack.tistory.com/1025

will-change

요소가 어떻게 변할지 힌트를 주어서 브라우저는 최적화를 한다.

너무 많은 요소에 will-change를 적용하지 마십시오. 브라우저는 이미 모든 것을 최적화하기 위해 최선을 다하고 있습니다. will-change더 강력한 최적화 중 일부 는 결국 많은 시스템 리소스를 사용하게 될 가능성이 높으며 이와 같이 과도하게 사용되면 페이지 속도가 느려지거나 많은 리소스를 소비할 수 있습니다.

쓸 때는 신중히 해야하고 우선순위를 정한다고 생각하면 된다.

will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */

/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;