Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>List Styling</title> <style> /* Navigation menu */ nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; } nav a { text-decoration: none; color: #333; } nav a:hover { color: #0066cc; } /* Custom bullet with ::before */ ul.custom li { list-style: none; padding-left: 20px; position: relative; } ul.custom li::before { content: "✔"; position: absolute; left: 0; color: green; } </style> </head> <body> <nav><ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul></nav> <ul class="custom"> <li>Feature one</li> <li>Feature two</li> <li>Feature three</li> </ul> </body> </html>
Result
Open