[HTML][CSS] css 가상요소 - ::after, ::before, content속성

css 가상요소: 태그 대신에 가상으로 꾸밈을 추가

 

1. ::after, ::before 이용해서 태그 앞,뒤에 글 추가

 

  <h3>front-end</h3>

 

h3::before{content: "Hi ";color: rgb(39, 114, 124);font-size: 25px;}
h3::after{content: " developer!";color: palevioletred;font-size: 30px;}

> content 속성을 이용해 글,문자 등을 추가할 수 있다.

 

 ::after, ::before 이용

 

2. 인용부호 사용

 

    <p>html</p>
    <p>css</p>

 

p::before{content: open-quote;}
p::after{content: close-quote;}

> 인용부호를 p태그 before, after에 추가

 

인용부호

 

(다음 포스팅: 가상요소를 이용해서 '바'를 추가)