Skip to content

Instantly share code, notes, and snippets.

@mtvbrianking

mtvbrianking/css-list-styling.html

Last active April 2, 2019 09:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mtvbrianking/ccc56b1a62261438eb34caef4effe5bf to your computer and use it in GitHub Desktop.
Save mtvbrianking/ccc56b1a62261438eb34caef4effe5bf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-list-styling.html
<!DOCTYPE html>
<html>
<head>
<title>CSS bullet styling</title>
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
position: relative;
padding-left: 30px;
font-size: 20px;
border-bottom: 1px solid #eee;
margin-bottom: 5px;
}
ul li::before {
display: inline-block;
font-size: 40px;
content: "\25CF";
color: #ffa500;
width: 1em;
position: absolute;
left: 0;
top: -15px;
}
</style>
</head>
<body>
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3.1
<br/>Item 3.2
</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<p>
<a href="https://jsfiddle.net/bmatovu/u8axfo59">JSFiddle</a>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment