List Marker Styles

by michaelschmid

HTML

<h2>Check List</h2>
<ul class="statusbullet">
  <li>15 minutes Sport</li>
  <li>Lernen
  	<ul>
    	<li>15 Honolulu</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
  </li>
  
  <li>Gemeinschaft</li>
  <li>Pflicht
  		<ul>
          <li>15 Honolulu</li>
          <li>CSS</li>
          <li>Javascript</li>
      </ul>
  </li>
</ul>


<h2>Check List</h2>
<ul class="statusborder">
  <li>15 minutes Sport</li>
  <li>Lernen
  	<ul>
    	<li>15 Honolulu</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>
  </li>
  
  <li>Gemeinschaft</li>
  <li>Pflicht
  		<ul>
          <li>15 Honolulu</li>
          <li>CSS</li>
          <li>Javascript</li>
      </ul>
  </li>
</ul>

<h2>HTML List</h2>
<ul>
  <li>15 Honolulu</li>
  <li>CSS</li>
  <li>Javascript</li>
</ul>

CSS

body {
  font-family: Verdana, Geneva, sans-serif; 
 
}




ul.statusborder, ul.statusborder ul {
  list-style: none;
  margin-left:0;
}


ul.statusborder li {
  border-left: 5px solid red;
  list-style-type: none;
  padding: 10px 20px ;
  margin: 10px 20px ;
}



ul.statusbullet, ul.statusbullet ul {
  list-style: none;
  margin-left:0;
}

ul.statusbullet li::before {
  content: "•";
  color: red;
  font-size:1.5em;
  display: inline-block;
  width: 1.5em;
  margin-left: -1em
 }