Better List Styles

Better Lists

by Jennifer Perrin

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

<h1>Better List Styles</h1>

<ul class="square">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  
  </li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  

<ul class="circle">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  

<ul class="diamond">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>  

<ul class="dash">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
</ul>

CSS

body {
  padding-top: 20px;
  font-size: 12px;
  line-height: 1.5;
  font-family: "Open Sans", Tahoma, sans-serif;
}

h1 {
  text-align: center;
  margin: 0;
  font-size: 20px;
}

ul {
  list-style: none;
  float: left;
  width: 23%;
  padding: 1%;
}

li {
  position: relative;
  padding-left: 0.75em;
}

li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  background: blue;
}

.square li:before {
  width: 0.375em;
  height: 0.375em;
}

.circle li:before {
  width: 0.375em;
  height: 0.375em;
  border-radius: 0.375em;
}

.diamond li:before {
  width: 0.375em;
  height: 0.375em;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dash li:before {
  width: 0.5em;
  height: 0.2em;
  top: 0.7em;
}