CSS / CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서
가상 요소를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1:before {
content: "Hello, ";
color: red;
}
</style>
</head>
<body>
<h1>JB</h1>
</body>
</html>
가상 클래스 hover를 이용하면 요소에 마우스를 올렸을 때 효과를 줈 수 있습니다. 다음은 텍스트의 색을 파랗게 만드는 예제입니다. 그런데, 가상 요소에는 적용되지 않습니다.
#css
2.85 GEEK