Skip to content

Instantly share code, notes, and snippets.

@suranyami

suranyami/marker-style.html

Created November 29, 2011 02:30
Show Gist options
  • Save suranyami/1403101 to your computer and use it in GitHub Desktop.
Save suranyami/1403101 to your computer and use it in GitHub Desktop.
Download ZIP
Styling a list marker in CSS
Raw
marker-style.html
<!doctype html>
<html>
<head>
<title>Marker example</title>
<style>
body {
font-size: 14px;
}
li {
counter-increment: note-counter;
}
li:before {
content: "Item " counter(note-counter) ":";
margin-right: 0.5em;
color: lightblue;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
</head>
<body>
<p>This is a long preceding paragraph ...</p>
<ul type="none">
<li>This is the first item.</li>
<li>This is the second item.</li>
<li>This is the third item.</li>
</ul>
<p>This is a long following paragraph ...</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment