::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가 된 것이다.
bob이 가려진 화면을 볼 수 있다. 이것을 응용하면 에니메이션 효과를 낼 수 있다. 아래와 같이 ::before의 코드를 수정하고 :hover::before의 코드를 추가하면 마우스를 bob에 올렸을 때 색칠되는 효과를 낼 수 있다. transition을 사용하면 서서히 색칠하도록 할 수도 있다. 단, transition과 함께 사용하는 것을 지원하지 않는 브라우저가 있다.
p::before{
width:100%-> 0%;
}
p:hover::before{
width:100%;
}
'웹(web) > 프론트엔드-css' 카테고리의 다른 글
CSS transform-origin (0) | 2020.05.27 |
---|---|
CSS white-space(white-space을 처리하는 방법) (0) | 2020.05.25 |
CSS vertical-align(inline 요소 세로 정렬) (0) | 2020.05.18 |
CSS animation by before (0) | 2020.05.15 |
CSS background-size (0) | 2020.05.14 |