728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
width: 300px;
margin: 0 auto;
border: 1px solid black;
}
ul li {
margin: 15px;
}
li.new::after {
content: 'NEW!';
font-size: x-small;
padding: 2px 4px;
margin: 0 10px;
border-radius: 2px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>제품 목록</h1>
<ul>
<li class="new">제품 A</li>
<li>제품 B</li>
<li>제품 C</li>
<li class="new">제품 D</li>
</ul>
</div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| teansform2 (0) | 2022.12.29 |
|---|---|
| teansform기본 (1) | 2022.12.29 |
| 가상선택자2 (0) | 2022.12.29 |
| 가상 선택자 (0) | 2022.12.29 |
| 그라데이션 응용 (0) | 2022.12.29 |