Színezett lista

Normál lista

html
<div class="leftBorderContainer">
    <h4 class="color-01"><a href="#" title="Praesent sollicitudin ligula purus" aria-label="Praesent sollicitudin ligula purus">Praesent sollicitudin ligula purus</a>»</h4>
</div>
css
.leftBorderContainer {
  margin-bottom: 20px;
}
.leftBorderContainer .moreContent {
  border-bottom: 1px solid #e5e5e5;
}
.leftBorderContainer:last-of-type .moreContent {
  border-bottom: none;
}
.leftBorderContainer h3 {
  padding: 10px 0 10px 20px;
  border-left: 5px solid #fff;
  margin: 0 0 20px 0;
  text-transform: none;
}
.leftBorderContainer h4 {
  padding: 10px 0 10px 20px;
  border-left: 3px solid #fff;
  margin: 0 0 20px 0;
  text-transform: none;
}
.leftBorderContainer .color-01 {
  border-color: #F27126;
}
.leftBorderContainer .color-02 {
  border-color: #461E56;
}
.leftBorderContainer .color-03 {
  border-color: #5F853B;
}
.leftBorderContainer .color-04 {
  border-color: #1D5C8C;
}
.leftBorderContainer .color-05 {
  border-color: #000;
}
.leftBorderContainer a {
  margin-right: 5px;
  color: #000;
}
.leftBorderContainer a:hover {
  -webkit-transition: none;
  transition: none;
  border-bottom-color: #000;
}

Lista bevezető szöveggel

Praesent sollicitudin ligula purus»

Aliquam erat volutpat. Praesent sollicitudin ligula purus, id lacinia sapien efficitur venenatis. Mauris vel feugiat felis, non placerat leo… Nunc blandit magna at est imperdiet, placerat porttitor nunc dapibus. Vestibulum a nibh bibendum, ullamcorper dui vitae, mattis felis. In ac ante ac ipsum consectetur dignissim. Integer ante urna, convallis nec eleifend vel, ullamcorper et est. Mauris in velit risus. Donec mollis diam a posuere imperdiet. Mauris commodo ex quis leo eleifend varius at auctor elit…

Praesent sollicitudin ligula purus»

Aliquam erat volutpat. Praesent sollicitudin ligula purus, id lacinia sapien efficitur venenatis. Mauris vel feugiat felis, non placerat leo… Nunc blandit magna at est imperdiet, placerat porttitor nunc dapibus. Vestibulum a nibh bibendum…

Praesent sollicitudin ligula purus»

Aliquam erat volutpat. Praesent sollicitudin ligula purus, id lacinia sapien efficitur venenatis. Mauris vel feugiat felis, non placerat leo… Nunc blandit magna at est imperdiet, placerat porttitor nunc dapibus. Vestibulum a nibh bibendum, ullamcorper dui vitae, mattis felis. In ac ante ac ipsum consectetur dignissim. Integer ante urna, convallis nec eleifend vel, ullamcorper et est…

Praesent sollicitudin ligula purus»

Aliquam erat volutpat. Praesent sollicitudin ligula purus, id lacinia sapien efficitur venenatis. Mauris vel feugiat felis, non placerat leo… Nunc blandit magna at est imperdiet, placerat porttitor nunc dapibus. Vestibulum a nibh bibendum, ullamcorper dui vitae, mattis felis. In ac ante ac ipsum consectetur dignissim. Integer ante urna, convallis nec eleifend vel, ullamcorper et est…

html
<div class="leftBorderContainer">
    <h3 class="color-01"><a href="#" title="Praesent sollicitudin ligula purus" aria-label="Praesent sollicitudin ligula purus">Praesent sollicitudin ligula purus</a>»</h3>
    <div class="moreContent">
        <p>Aliquam erat volutpat. Praesent sollicitudin ligula purus, id lacinia sapien efficitur venenatis. Mauris vel feugiat felis, non placerat leo… Nunc blandit magna at est imperdiet, placerat porttitor nunc dapibus. Vestibulum a nibh bibendum, ullamcorper dui vitae, mattis felis. In ac ante ac ipsum consectetur dignissim. Integer ante urna, convallis nec eleifend vel, ullamcorper et est. Mauris in velit risus. Donec mollis diam a posuere imperdiet. Mauris commodo ex quis leo eleifend varius at auctor elit…</p>
    </div>
</div>
css
.leftBorderContainer {
	margin-bottom: 20px;
}
.leftBorderContainer .moreContent {
	border-bottom: 1px solid #e5e5e5;
}
.leftBorderContainer:last-of-type .moreContent {
	border-bottom: none;
}
.leftBorderContainer h3 {
	padding: 10px 0 10px 20px;
	border-left: 5px solid #fff;
	margin: 0 0 20px 0;
	text-transform: none;
}
.leftBorderContainer h4 {
	padding: 10px 0 10px 20px;
	border-left: 3px solid #fff;
	margin: 0 0 20px 0;
	text-transform: none;
}
.leftBorderContainer .color-01 {
	border-color: #F27126;
}
.leftBorderContainer .color-02 {
	border-color: #461E56;
}
.leftBorderContainer .color-03 {
	border-color: #5F853B;
}
.leftBorderContainer .color-04 {
	border-color: #1D5C8C;
}
.leftBorderContainer .color-05 {
	border-color: #000;
}
.leftBorderContainer a {
	margin-right: 5px;
	color: #000;
}
.leftBorderContainer a:hover {
	-webkit-transition: none;
	transition: none;
	border-bottom-color: #000;
}