অনঅর্ডার্ড লিস্টের বুলেট স্টাইল করতে আমরা list-style প্রোপার্টি ব্যবহার করতে পারি।
সিনট্যাক্স
CSS li-style প্রোপার্টির সিনট্যাক্স নিচের মতো:
li { list-style: /*value*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS li-style প্রোপার্টি ব্যাখ্যা করে।
<!DOCTYPE html> <html> <head> <style> li { margin: 3px 0; padding: 2%; width: 28%; line-height: 1.2%; list-style: none; border-radius: 5% 0 0 5%; box-shadow: -10px 2px 4px 0 chartreuse; color: cornflowerblue; } li:hover { box-shadow: -10px 2px 4px 0 blue!important; font-size: 1.4em; } </style> </head> <body> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </body> </html>
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> ol { list-style: none; counter-reset: li; overflow: hidden; } li { margin-right: 10%; padding: 2%; width: 15%; float: left; line-height: 1.2%; font-weight: bold; counter-increment: li; box-shadow: inset 2px 14px 10px lightblue; } li:hover { box-shadow: inset 6px 14px 10px lightgreen!important; font-size: 1.4em; } li::before { content: counter(li); color: seagreen; display: inline-block; width: 40%; margin-left: -2em; } </style> </head> <body> <ol> <li>a</li> <li>b</li> <li>c</li> </ol> </body> </html>
এটি নিচের আউটপুট দেয়:
