check marks

by rdenver6

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css">
<div>
<h2>
My Links
</h2>
<ul>
<li>
<i class="fas fa-check"></i>Link 1</li>
<li><i class="fas fa-check"></i>Link 2</li>
<li><i class="fas fa-check"></i>Link 3</li>
<li><i class="fas fa-check"></i>Link 4</li>
<li class="settings"><i class="fas fa-cog"></i></li>
</ul>
</div>
<div>
<h2>
Links and Text
</h2>
<div>
<div class="check">
  <i class="fas fa-check"></i>
  <div class="timestamp">
  Today, 5:30pm
  </div>
  <div class="headline">
  Lorem Ipsum Dolor Sit Amit
  </div>
  <div class="summary">
  This is a whole lot of summary text about something important.
  </div>
</div>
<div class="check">
  <i class="fas fa-check"></i>
  <div class="timestamp">
  Today, 5:30pm
  </div>
  <div class="headline">
  Lorem Ipsum Dolor Sit Amit
  </div>
  <div class="summary">
  This is a whole lot of summary text about something important.
  </div>
</div><div class="check">
  <i class="fas fa-check"></i>
  <div class="timestamp">
  Today, 5:30pm
  </div>
  <div class="headline">
  Lorem Ipsum Dolor Sit Amit
  </div>
  <div class="summary">
  This is a whole lot of summary text about something important.
  </div>
</div>
</div>
</div>
<h2>
Links and Text on blue background
</h2>
<div class="checkWrapper">
<div class="check">
  <i class="fas fa-check"></i>
  <div class="timestamp">
  Today, 5:30pm
  </div>
  <div class="headline">
  Lorem Ipsum Dolor Sit Amit
  </div>
  <div class="summary">
  This is a whole lot of summary text about something important.
  </div>
</div>
<div class="check">
  <i class="fas fa-check"></i>
  <div class="timestamp">
  Today, 5:30pm
  </div>
  <div class="headline">
  Lorem Ipsum Dolor Sit Amit
  </div>
  <div class="summary">
  This is a whole lot of summary text about something important.
  </div>
</div><div class="check">
  <i class="fas fa-check"></i>
  <div class="timestamp">
  Today, 5:30pm
  </div>
  <div class="headline">
  Lorem Ipsum Dolor Sit Amit
 ...

CSS

ul {
  margin: 0;
  padding: 0;
  
}
ul li {
  font-size:16px;
  list-style-type: none;
  padding:2px;
  position: relative;
  text-align: left;
  text-transform:uppercase;
}
ul li::before {
  background: #7C868B;
  content: '';
  left: 13px;
  top: -31px;
  position: absolute;
  height: 100%;
  width: 0.1em;
  z-index: -1;
}
ul li:first-child::before {
  display: none;
}
ul li i.fa-check {
  background-color: #43aF29;
  border-radius: 50%;
  color:white;
  display: inline-block;
  font-size:11px;
  margin:8px 8px 8px 0;
  padding:7px;
  position: relative;
}
ul li.settings i {
  background-color:white;
  color:#7C868B;  
  display: inline-block;  
  font-size:20px;  
  margin:8px 8px 8px 2px;  
  position: relative;
 }

.check {
  position:relative;
}
.check > div {
  margin-left:35px;  
 }
.check > i.fa-check {
  background-color: #43aF29;
  border-radius: 50%;
  color:white;
  display: inline-block;
  float:left;
  font-size:11px;
  margin:12px 8px 8px 0;
  padding:7px;
  position: relative;
 }
.check .headline {
  font-weight:900;
}
.check .timestamp {
  padding:15px 0 5px 0;
}
.check::before {
  background: #7C868B;
  content: '';
  left: 12px;
  top: -43px;
  position: absolute;
  height: 100%;
  width: 0.1em;
  z-index: -1;
}
.check:first-child::before {
  display: none;
}

.checkWrapper {
  background-color:#0046AA;
  color:white;
  padding:10px 20px;
}
.checkWrapper .check::before {
  background: #7C868B;
  content: '';
  left: 12px;
  top: -37px;
  position: absolute;
  height: 100%;
  width: 0.1em;
  z-index: 0;
}
.checkWrapper .check:first-child::before {
  display: none;
}
.checkWrapper .check.settings {
  height:37px;
  padding-left:3px;
  padding-top:20px;
}
.checkWrapper .check > i.fa-cog {  
  font-size:20px;  
 }