Today we will learn how to create a Badge using HTML and CSS. Badges are used to represent the number of items that the container contains, For example, we can show the number of items in the cart.
![Badge html css output](https://codeindoor.com/wp-content/uploads/2023/01/badge-min-300x300.png)
As you saw in the above output we are creating the badge for the text “Code Indoor”.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tooltip</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="container">
<h3 class="badge" data-badge="10">Code Indoor</h3>
</div>
</body>
</html>
In the HTML code, we are creating a text and set the badge value to the data-badge data-attribute.
CSS Code
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
html,
body {
font-family: "DM Sans", sans-serif;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #DDC1A7;
}
.badge {
font-size: 1.4rem;
font-weight: 500;
color: #2F3B69;
position: relative;
background-color: #fff;
padding: 4px 12px;
border-radius: 5px;
box-shadow: 3px -2px 24px -10px rgba(0,0,0,0.75);
}
.badge::before {
content: attr(data-badge);
font-size: 14px;
position: absolute;
left: 93%;
bottom: 70%;
background: #5C4E4E;
padding: 4px 5px;
color: #fff;
border-radius: 50%;
}
In the CSS code, we are making a badge using the before pseudo-element and assigning the badge data to the content of the before element. Through this, we are creating a Badge component using HTML and CSS