Typography & Text
Styling Lists
list-style, Custom Bullets
💡 list-style property list ke "bullet points ka look" control karti hai — default bullets/numbers ko customize kar sakte ho, ya poori tarah hata kar apna khud ka design (jaise icons) bana sakte ho.
list-style-type bullet/number ka style set karta hai (disc, circle, square, decimal, none). list-style-position bullets ko andar/bahar rakhta hai. list-style: none navigation menus mein bahut common hai — semantically list rehti hai (accessibility ke liye), visually bullets nahi dikhte.
ul {
list-style-type: square; /* default disc ki jagah square bullets */
}
nav ul {
list-style: none; /* navigation menus mein bullets hataना common hai */
padding: 0;
margin: 0;
}
nav li {
display: inline-block; /* horizontal navigation ke liye */
}
/* Custom bullet with ::before pseudo-element: */
.custom-list li::before {
content: "→ ";
color: blue;
}📋
list-style property list ke "bullet points ka look" control karti hai — default bullets/numbers ko customize kar sakte ho, ya poori tarah hata kar apna khud ka design (jaise icons) bana sakte ho.
1 / 2
⚡ झट से Recap
- list-style-type = bullet/number style (disc, square, decimal, none)
- Navigation menus mein list-style: none common pattern hai
- ::before se custom bullets/icons bhi bana sakte ho
इस page में (2 subtopics)
CSS counters (counter-reset, counter-increment, counter()) custom numbering systems banane dete hain — default ol numbering se zyada control, jaise "Section 1.1", "Section 1.2" jaisi custom formats.
.sections {
counter-reset: section; /* counter shuru karo */
}
.sections h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
/* Output: "Section 1: Title", "Section 2: Title"... */Tip: CSS counters advanced feature hai, rarely everyday use mein zaroori — mostly technical documentation, legal documents jaisi content mein jaha custom numbering schemes chahiye hote hain.
Navigation menus banane ka standard pattern: semantic ul/li structure, phir CSS (flexbox usually) se horizontal layout — accessibility (screen readers "list of N items" announce karte hain) aur visual flexibility dono milta hai.
nav ul {
display: flex; /* horizontal layout */
list-style: none;
gap: 20px; /* items ke beech spacing */
padding: 0;
}
nav a {
text-decoration: none;
color: #333;
}Tip: display: flex + gap modern navigation styling ka standard combo hai — purane float-based ya inline-block approaches se bahut simpler aur predictable.