개발자노트/웹

Html에서 가상요소 선택자 (before / after) (스타일시트)

hansummer 2022. 7. 22. 00:50

Html의 특정 태그 앞 뒤에 요소를 삽입하는 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가상요소 선택자</title>
<style type="text/css">
	p:before{
		content: "◎ ";
	}
	.menu:after{
		content: "메뉴가 끝났습니다.";
		color: red;
	}

</style>

</head>
<body>


<div class = "menu">
	<p>상의</p>
	<p>바지</p>
	<p>치마</p>
	<p>신발</p>
</div>


</body>
</html>

 

                                                                           결과 화면