how to make double bullets html
ASHISH GUPTA
3 min read
- css
- php
Introduction
Are you looking to add double bullets points in your website or in project. double bullets are look like "••" it's usually not useful but some of them wants to use it in his website or in projects.Let's create attractive content is important for engaging readers on your website,It's an also part of ui/ux designeing. Sometimes, you might want to enhance the usual bullet points by using double bullets. This blog post will guide you through the steps to make double bullets in HTML.
What Are Double Bullets?
Double bullets are a way to highlights items in a list by using two bullet points rather than one. This can be useful for highlighting important information or creating a unique list style.
In HTML have not direct attributes to do it so using CSS we can achieve double bullets points.
Basic HTML Structure
First, let's set up a basic HTML structure. Create an HTML file with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Double Bullets Example</title>
<style>
/* Add your CSS here */
</style>
</head>
<body>
<ul class="double-bullets">
<li>BiyondBytes 1</li>
<li>BiyondBytes 2</li>
<li>BiyondBytes 3</li>
</ul>
</body>
</html>Adding CSS for Double Bullets
To create double bullets, we will use CSS to style the list items. Add the following CSS inside the <style> tag:
.double-bullets {
list-style-type: none; /* Remove default bullets */
padding-left: 20px; /* Add padding for custom bullets */
}
.double-bullets li {
position: relative;
margin-bottom: 10px; /* Space between items */
}
.double-bullets li::before,
.double-bullets li::after {
content: "•"; /* Unicode character for bullet */
position: absolute;
left: 0;
color: #000; /* Bullet color */
}
.double-bullets li::before {
left: -10px; /* Position of the first bullet */
}
.double-bullets li::after {
left: -20px; /* Position of the second bullet */
}Understanding the CSS
list-style-type: none;: Removes the default bullets from the list.padding-left: 20px;: Adds padding to the left to make space for the custom bullets.position: relative;: Positions the list items relative to their normal position.::beforeand::after: Pseudo-elements to add custom content before and after each list item.content: "•";: Adds a bullet character.left: -10px;andleft: -20px;: Positions the bullets to the left of the list item.
Final Result
When you open your HTML file in a browser, you should see a list with double bullets, like this:
•• BiyondBytes 1
•• BiyondBytes 2
•• BiyondBytes 3
Conclusion
Just a few lines of HTML and CSS, you can create double bullets to make your lists stand out. This simple yet effective styling technique can enhance the visual appeal of your content and draw attention to important items.
Feel free to experiment with different styles and colors to match your website's design.
Happy coding!!
