CSS ::before

::before는 css를 통해 html 구조는 변경하지 않고 디자인을 추가함과 동시에 text도 쓸 수 있는 기능을 제공한다. 선택한 태그의 시작부분에 새로운 가상의 요소가 생긴다고 보면 된다. 단, content 속성은 꼭 넣어주어야 한다. 

 

 

다음은 mdn의  before 설명이다. 

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

 

p::before{

  content: 'hi ';

}

 

<p> bob</p>

 

위와 같은 css, html을 작성하면 화면에는 hi bob 이 표시된다. 즉, before는 말 그대로 p 요소 시작 전에 요소 하나를 추가해주는 기능이다.

p 태그의 내용이 시작되기 전에 before에 해당하는 내용을 넣어주는 것이다. 나아가 before를 활용하여 무엇을 할 수 있을까? 다음 코드를 살펴보자.

 

p::before{

  content: '';

  display:block;

  position:absolute;

  width: 100%;

  height: 20px;

  transition: all 1s;

  background-color: #333

}

 

위의 before를 보면 p의 컨텐츠를 덧칠하게 된다. 이렇게 덧칠하는 결과를 만들어 낼 수 있는 css가 된 것이다. 

 

 

p 태그만 있는 경우

::before을 적용한 경우

 

bob이 가려진 화면을 볼 수 있다. 이것을 응용하면 에니메이션 효과를 낼 수 있다. 아래와 같이 ::before의 코드를 수정하고 :hover::before의 코드를 추가하면 마우스를 bob에 올렸을 때 색칠되는 효과를 낼 수 있다. transition을 사용하면 서서히 색칠하도록 할 수도 있다. 단, transition과 함께 사용하는 것을 지원하지 않는 브라우저가 있다.

 

p::before{

width:100%-> 0%;

}

p:hover::before{

width:100%;

}