#17 CSS content 속성

 

content

• ::before와 ::after 가상 요소에 콘텐츠를 삽입하기 위한 속성
• 공백(space)으로 구분하여 여러 가지 값을 삽입할 수 있다.

 

- 속성 값

• "문자열" : 큰따옴표로 묶어 문자열을 삽입
• attr(속성 이름) : 괄호 내에 속성 이름을 입력하여 해당 속성의 속성 값을 삽입
• url(경로) : 괄호 내에 경로를 입력하여 미디어를 삽입 (미디어 크기 조절 불가능)
• counter(카운터 id) : 괄호 내에 생성한 카운터의 id를 입력하여 해당 카운터의 값을 삽입
• open-quote, close-quote : 큰 따옴표를 삽입 (여는 따옴표 없이는 닫는 따옴표를 사용할 수 없다)
• no-open-quote, no-close-quote : 삽입했던 큰 따옴표를 제거

<a href="html.html">HTML</a><br>
<a href="css.html">CSS</a><br>
<a href="JavaScript.html">JavaScript</a><br>
<a href="jQeury.html">jQuery</a><br>
<a href="React.html">React</a>

a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;
  line-height: 30px;
}
a::before {
  content: url(../source/heart_small.png) " ";
  vertical-align: middle;
}
a::after {
  content: "(" attr(href) ")";
}

---