【Gutenberg Compatible】 Best 33 list style templates

Beautiful Design lets user feel good, and stay on your site for a long time. And also, you will be easy to get repeat users.In this Article. I will provide design templates of list style.

Before Starting

About third party library

I will use following libraries. If you use my design recipes, please load these libraries before using.

  • Font Awesome5 (https://fontawesome.com)

Supported browser

Following browsers support sample code. These are same as Bootstrap4 and above..

Mobile Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Desktop Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Table source: Bootsteap4

Pattern1

  • List Text
  • List Text
html
<div class="lists_wrap1">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap1 {
  margin-bottom: 20px;
}
div.lists_wrap1 ul, div.lists_wrap1 ol {
  background-color: #fcfcfc;
  color: #000000;
  border: 3px solid #0693e3;
  padding: 10px;
  text-align: left;
}

Pattern2

  • List Text
  • List Text
html
<div class="lists_wrap2">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap2 {
  margin-bottom: 20px;
}
div.lists_wrap2 ul, div.lists_wrap2 ol {
  background-color: #eeeeee;
  color: #000000;
  border: 3px double #0693e3;
  border-radius: 16px;
  padding: 10px;
  text-align: left;
}

Pattern3

[sociallocker id=”23776″]

  • List Text
  • List Text
html
<div class="lists_wrap3">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap3 {
  margin-bottom: 20px;
}
div.lists_wrap3 ul, div.lists_wrap3 ol {
  padding: 10px;
  text-align: left;
  color: #668ad8;
  border: dashed 2px #668ad8;
  background-color: #f1f8ff;
}

Pattern4

  • List Text
  • List Text
html
<div class="lists_wrap4">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap4 {
  margin-bottom: 20px;
}
div.lists_wrap4 ul, div.lists_wrap4 ol {
  padding: 10px;
  text-align: left;
  color: #1e366a;
  border-top: solid #1e366a 1px;
  border-bottom: solid #1e366a 1px;
}

Pattern5

  • List Text
  • List Text
html
<div class="lists_wrap5">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap5 {
  margin-bottom: 20px;
}
div.lists_wrap5 ul, div.lists_wrap5 ol {
  padding: 10px;
  text-align: left;
  color: #1e366a;
  border: dotted #1e366a 1px;
}

Pattern6

  • List Text
  • List Text
html
<div class="lists_wrap6">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap6 {
  margin-bottom: 20px;
}
div.lists_wrap6 ul, div.lists_wrap6 ol {
  padding: 10px;
  text-align: left;
  background-color: #fffcf4;
  border-radius: 8px;
  -webkit-box-shadow: 0px 0px 5px silver;
  box-shadow: 0px 0px 5px silver;
}

Pattern7

  • List Text
  • List Text
html
<div class="lists_wrap7">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap7 {
  margin-bottom: 20px;
}
div.lists_wrap7 ul, div.lists_wrap7 ol {
  padding: 10px;
  text-align: left;
  background-color: #fffde8;
  -webkit-box-shadow: 0px 0px 0px 10px #fffde8;
  box-shadow: 0px 0px 0px 10px #fffde8;
  border: dashed 2px #ffb03f;
  border-radius: 9px;
  margin-left: 10px;
  margin-right: 10px;
}

Pattern8

  • List Text
  • List Text
html
<div class="lists_wrap8">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap8 {
  margin-bottom: 20px;
}
div.lists_wrap8 ul, div.lists_wrap8 ol {
  padding: 10px;
  text-align: left;
  background-color: #f1f8ff;
  -webkit-box-shadow: 0px 0px 0px 10px #f1f8ff;
  box-shadow: 0px 0px 0px 10px #f1f8ff;
  border: dashed 2px #668ad8;
  border-radius: 9px;
  margin-left: 10px;
  margin-right: 10px;
}

Pattern9

  • List Text
  • List Text
html
<div class="lists_wrap9">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap9 {
  margin-bottom: 20px;
}
div.lists_wrap9 ul, div.lists_wrap9 ol {
  padding: 0;
  position: relative;
  text-align: left;
}
div.lists_wrap9 ul li, div.lists_wrap9 ol li {
  padding: 10px;
  color: #2d8fdd;
  border-left: solid 6px #2d8fdd;
  background-color: #f1f8ff;
  margin-bottom: 3px;
  list-style-type: none;
}

Pattern10

  • List Text
  • List Text
html
<div class="lists_wrap10">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap10 {
  margin-bottom: 20px;
}
div.lists_wrap10 ul, div.lists_wrap10 ol {
  padding: 0;
  position: relative;
  text-align: left;
}
div.lists_wrap10 ul li, div.lists_wrap10 ol li {
  padding: 10px;
  color: #2d8fdd;
  border-left: solid 6px #2d8fdd;
  background-color: #f1f8ff;
  margin-bottom: 3px;
  list-style-type: none;
}

Pattern11

  • List Text
  • List Text
html
<div class="lists_wrap11">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap11 {
  margin-bottom: 20px;
}
div.lists_wrap11 ul, div.lists_wrap11 ol {
  padding: 0;
  position: relative;
  text-align: left;
}
div.lists_wrap11 ul li, div.lists_wrap11 ol li {
  padding: 10px;
  color: #404040;
  border-left: solid 6px #1fa67a;
  border-bottom: solid 2px #dadada;
  border-radius: 0 15px 15px 0;
  font-weight: bold;
  background-color: whitesmoke;
  margin-bottom: 3px;
  list-style-type: none;
}

Pattern12

  • List Text
  • List Text
html
<div class="lists_wrap12">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap12 {
  margin-bottom: 20px;
}
div.lists_wrap12 ul, div.lists_wrap12 ol {
  padding: 0;
  position: relative;
  text-align: left;
}
div.lists_wrap12 ul li, div.lists_wrap12 ol li {
  position: relative;
  padding: 10px;
  color: #505050;
  vertical-align: middle;
  border-radius: 0 15px 15px 0;
  background-color: #dbebf8;
  margin-bottom: 3px;
  list-style-type: none;
  border-radius: 15px 0px 0px 15px;
  font-weight: bold;
}
div.lists_wrap12 ul li:before, div.lists_wrap12 ol li:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

Pattern13

  • List Text
  • List Text
html
<div class="lists_wrap13">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap13 {
  margin-bottom: 20px;
}
div.lists_wrap13 ul, div.lists_wrap13 ol {
  border: solid 2px skyblue;
  border-radius: 5px;
  position: relative;
}
div.lists_wrap13 ul li, div.lists_wrap13 ol li {
  line-height: 1.5;
  padding: 10px 10px 10px 30px;
  list-style-type: none;
}
div.lists_wrap13 ul li:before, div.lists_wrap13 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f138";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: skyblue;
}

Pattern14

  • List Text
  • List Text
html
<div class="lists_wrap14">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap14 {
  margin-bottom: 20px;
}
div.lists_wrap14 ul, div.lists_wrap14 ol {
  border: solid 2px skyblue;
  border-radius: 5px;
  position: relative;
}
div.lists_wrap14 ul li, div.lists_wrap14 ol li {
  line-height: 1.5;
  padding: 10px 10px 10px 30px;
  list-style-type: none;
}
div.lists_wrap14 ul li:before, div.lists_wrap14 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f075";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: skyblue;
}

Pattern15

  • List Text
  • List Text
html
<div class="lists_wrap15">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap15 {
  margin-bottom: 20px;
}
div.lists_wrap15 ul, div.lists_wrap15 ol {
  border: solid 2px #ffb03f;
  border-radius: 5px;
  position: relative;
}
div.lists_wrap15 ul li, div.lists_wrap15 ol li {
  line-height: 1.5;
  padding: 10px 10px 10px 30px;
  list-style-type: none;
}
div.lists_wrap15 ul li:before, div.lists_wrap15 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f00c";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #ffb03f;
}

Pattern16

  • List Text
  • List Text
html
<div class="lists_wrap16">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap16 {
  margin-bottom: 20px;
}
div.lists_wrap16 ul, div.lists_wrap16 ol {
  border: double 4px #21b384;
  border-radius: 5px;
  position: relative;
}
div.lists_wrap16 ul li, div.lists_wrap16 ol li {
  line-height: 1.5;
  padding: 10px 10px 10px 30px;
  list-style-type: none;
}
div.lists_wrap16 ul li:before, div.lists_wrap16 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f0a4";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #21b384;
}

Pattern17

  • List Text
  • List Text
html
<div class="lists_wrap17">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
html
div.lists_wrap17 {
  margin-bottom: 20px;
}
div.lists_wrap17 ul, div.lists_wrap17 ol {
  border: solid 2px #ff938b;
  border-radius: 5px;
  background-color: #fffaf1;
  position: relative;
}
div.lists_wrap17 ul li, div.lists_wrap17 ol li {
  line-height: 1.5;
  padding: 10px 10px 10px 30px;
  list-style-type: none;
}
div.lists_wrap17 ul li:before, div.lists_wrap17 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f1b0";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #ff938b;
}

Pattern18

  • List Text
  • List Text
html
<div class="lists_wrap18">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap18 {
  margin-bottom: 20px;
}
div.lists_wrap18 ul, div.lists_wrap18 ol {
  -webkit-box-shadow: 0px 0px 3px silver;
  box-shadow: 0px 0px 3px silver;
  border: solid 1px whitesmoke;
  border-radius: 5px;
  background-color: #fafafa;
  position: relative;
}
div.lists_wrap18 ul li, div.lists_wrap18 ol li {
  line-height: 1.5;
  padding: 10px 10px 10px 30px;
  list-style-type: none;
}
div.lists_wrap18 ul li:before, div.lists_wrap18 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f0da";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: gray;
}

Pattern19

  • List Text
  • List Text
html
<div class="lists_wrap19">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap19 {
  margin-bottom: 20px;
}
div.lists_wrap19 ul, div.lists_wrap19 ol {
  padding: 0;
  position: relative;
}
div.lists_wrap19 ul li, div.lists_wrap19 ol li {
  padding: 10px 10px 10px 30px;
  list-style-type: none;
  background: -webkit-gradient(linear, left top, left bottom, from(whitesmoke), to(#dadada));
  background: -webkit-linear-gradient(top, whitesmoke 0%, #dadada 100%);
  background: -o-linear-gradient(top, whitesmoke 0%, #dadada 100%);
  background: linear-gradient(to bottom, whitesmoke 0%, #dadada 100%);
  text-shadow: 1px 1px 1px whitesmoke;
  color: #000000;
}
div.lists_wrap19 ul li:before, div.lists_wrap19 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f138";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: orange;
}

Pattern20

  • List Text
  • List Text
html
<div class="lists_wrap20">
<ul>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap20 {
  margin-bottom: 20px;
}
div.lists_wrap20 ul, div.lists_wrap20 ol {
  padding: 0;
  position: relative;
}
div.lists_wrap20 ul li, div.lists_wrap20 ol li {
  padding: 10px 10px 10px 30px;
  list-style-type: none;
  background: -webkit-gradient(linear, left top, left bottom, from(skyblue), to(#5aade6));
  background: -webkit-linear-gradient(top, skyblue 0%, #5aade6 100%);
  background: -o-linear-gradient(top, skyblue 0%, #5aade6 100%);
  background: linear-gradient(to bottom, skyblue 0%, #5aade6 100%);
  color: #ffffff;
}
div.lists_wrap20 ul li:before, div.lists_wrap20 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f138";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #ffffff;
}

Pattern21

  • List Text
  • List Text
  • List Text
html
<div class="lists_wrap21">
<ul>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap21 {
  margin-bottom: 20px;
}
div.lists_wrap21 ul, div.lists_wrap21 ol {
  padding: 0 10px;
  position: relative;
  border: solid 2px #ffb03f;
}
div.lists_wrap21 ul li, div.lists_wrap21 ol li {
  padding: 10px 10px 10px 30px;
  list-style-type: none;
  border-bottom: dashed 1px silver;
}
div.lists_wrap21 ul li:before, div.lists_wrap21 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f138";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #ffb03f;
}
div.lists_wrap21 ul li:last-child, div.lists_wrap21 ol li:last-child {
  border-bottom: none;
}

Pattern22

  • List Text
  • List Text
  • List Text
html
<div class="lists_wrap22">
<ul>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap22 {
  margin-bottom: 20px;
}
div.lists_wrap22 ul, div.lists_wrap22 ol {
  position: relative;
  background-color: whitesmoke;
}
div.lists_wrap22 ul li, div.lists_wrap22 ol li {
  padding: 10px 10px 10px 30px;
  list-style-type: none;
  border-bottom: 2px solid white;
}
div.lists_wrap22 ul li:before, div.lists_wrap22 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f00c";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #668ad8;
}
div.lists_wrap22 ul li:last-child, div.lists_wrap22 ol li:last-child {
  border-bottom: none;
}

Pattern23

  • List Text
  • List Text
  • List Text
html
<div class="lists_wrap23">
<ul>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap23 {
  margin-bottom: 20px;
}
div.lists_wrap23 ul, div.lists_wrap23 ol {
  padding: 0;
  position: relative;
}
div.lists_wrap23 ul li, div.lists_wrap23 ol li {
  padding: 10px 10px 10px 30px;
  list-style-type: none;
  color: #fff;
  background-color: #81d0cb;
  border-bottom: 2px solid white;
  font-weight: bold;
}
div.lists_wrap23 ul li:before, div.lists_wrap23 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f14a";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #fff;
}
div.lists_wrap23 ul li:last-child, div.lists_wrap23 ol li:last-child {
  border-bottom: none;
}

Pattern24

  • List Text
  • List Text
  • List Text
html
<div class="lists_wrap24">
<ul>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap24 {
  margin-bottom: 20px;
}
div.lists_wrap24 ul, div.lists_wrap24 ol {
  padding: 0;
  position: relative;
}
div.lists_wrap24 ul li, div.lists_wrap24 ol li {
  padding: 10px 10px 10px 30px;
  list-style-type: none;
  color: #fff;
  background-color: #2d8fdd;
  border-bottom: 1px solid #fff;
  font-weight: bold;
}
div.lists_wrap24 ul li:before, div.lists_wrap24 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f303";
  font-weight: bold;
  position: absolute;
  left: 10px;
  color: #fff;
}
div.lists_wrap24 ul li:last-child, div.lists_wrap24 ol li:last-child {
  border-bottom: none;
}

Pattern25

  • List Text
  • List Text
  • List Text
html
<div class="lists_wrap25">
<ul>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap25 {
  margin-bottom: 20px;
}
div.lists_wrap25 ul, div.lists_wrap25 ol {
  padding: 0;
}
div.lists_wrap25 ul li, div.lists_wrap25 ol li {
  padding: 10px;
  position: relative;
  list-style-type: none;
  background-color: #f1f8ff;
  border-left: solid 35px #5c9ee7;
  font-weight: bold;
  margin-bottom: 4px;
}
div.lists_wrap25 ul li:before, div.lists_wrap25 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f303";
  font-weight: bold;
  position: absolute;
  text-align: center;
  display: block;
  padding: 10px;
  left: -35px;
  color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
div.lists_wrap25 ul li:last-child, div.lists_wrap25 ol li:last-child {
  border-bottom: none;
}

Pattern26

  1. List Text
  2. List Text
  3. List Text
html
<div class="lists_wrap26">
<ol>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ol>
</div>
css
div.lists_wrap26 {
  margin-bottom: 20px;
}
div.lists_wrap26 ol {
  background-color: #f5faff;
  padding: 10px;
  text-align: left;
  counter-reset: number;
  list-style-type: none;
}
div.lists_wrap26 ol li {
  position: relative;
  padding-left: 30px;
}
div.lists_wrap26 ol li:before {
  font-weight: bold;
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background-color: #5c9ee7;
  border-radius: 50%;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Pattern27

  1. List Text
  2. List Text
  3. List Text
html
<div class="lists_wrap27">
<ol>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ol>
</div>
css
div.lists_wrap27 {
  margin-bottom: 20px;
}
div.lists_wrap27 ol {
  border: solid 2px #ffb107;
  padding: 0 10px;
  text-align: left;
  counter-reset: number;
  list-style-type: none;
}
div.lists_wrap27 ol li {
  position: relative;
  padding: 10px 10px 10px 30px;
  border-bottom: dashed 1px orange;
}
div.lists_wrap27 ol li:before {
  font-weight: bold;
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background-color: #ffb107;
  border-radius: 50%;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
div.lists_wrap27 ol li:last-child {
  border-bottom: none;
}

Pattern28

  1. List Text
  2. List Text
  3. List Text
html
<div class="lists_wrap28">
<ol>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ol>
</div>
css
div.lists_wrap28 {
  margin-bottom: 20px;
}
div.lists_wrap28 ol {
  border: dashed 1px gray;
  padding: 0 10px;
  text-align: left;
  counter-reset: number;
  list-style-type: none;
}
div.lists_wrap28 ol li {
  position: relative;
  padding: 10px 10px 10px 30px;
}
div.lists_wrap28 ol li:before {
  font-weight: bold;
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background-color: #74c2f8;
  left: 0px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Pattern29

  1. List Text
  2. List Text
  3. List Text
html
<div class="lists_wrap29">
<ol>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ol>
</div>
css
div.lists_wrap29 {
  margin-bottom: 20px;
}
div.lists_wrap29 ol {
  padding: 0;
  text-align: left;
  counter-reset: number;
  list-style-type: none;
}
div.lists_wrap29 ol li {
  position: relative;
  padding: 10px;
  background-color: #f1f8ff;
  border-left: solid 35px #5c9ee7;
}
div.lists_wrap29 ol li:before {
  font-weight: bold;
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  background-color: #74c2f8;
  left: 0px;
  width: 35px;
  text-align: center;
  color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Pattern30

  1. List Text
  2. List Text
  3. List Text
html
<div class="lists_wrap30">
<ol>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ol>
</div>
css
div.lists_wrap30 {
  margin-bottom: 20px;
}
div.lists_wrap30 ol {
  padding: 0;
  text-align: left;
  counter-reset: number;
  list-style-type: none;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
}
div.lists_wrap30 ol li {
  position: relative;
  padding: 10px 0 0 15px;
}
div.lists_wrap30 ol li:before {
  font-weight: bold;
  position: absolute;
  counter-increment: number;
  content: counter(number);
  font-family: 'Bradley Hand','Segoe Script','Segoe Print',sans-serif;
  left: 0;
}

Pattern31

  1. List Text
  2. List Text
  3. List Text
html
<div class="lists_wrap31">
<ol>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ol>
</div>
css
div.lists_wrap31 {
  margin-bottom: 20px;
}
div.lists_wrap31 ol {
  padding-left: 10px;
  text-align: left;
  counter-reset: number;
  list-style-type: none;
  border: solid 2px #5c9ee7;
}
div.lists_wrap31 ol li {
  position: relative;
  padding: 10px 10px 10px 35px;
}
div.lists_wrap31 ol li:before {
  font-weight: bold;
  position: absolute;
  counter-increment: number;
  content: counter(number);
  display: inline-block;
  color: #fff;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: #5c9ee7;
  border-radius: 50%;
}
div.lists_wrap31 ol li:after {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #5c9ee7;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Pattern32

  • List Text
  • List Text
  • List Text
html
<div class="lists_wrap32">
<ul>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap32 {
  margin-bottom: 20px;
}
div.lists_wrap32 ul, div.lists_wrap32 ol {
  margin-top: 45px;
  padding: 0px 10px;
  text-align: left;
  list-style-type: none;
  border: solid 2px #ffb03f;
  position: relative;
}
div.lists_wrap32 ul li, div.lists_wrap32 ol li {
  padding: 10px 10px 10px 20px;
  border-bottom: dashed 1px silver;
}
div.lists_wrap32 ul li:last-child, div.lists_wrap32 ol li:last-child {
  border-bottom: none;
}
div.lists_wrap32 ul li:before, div.lists_wrap32 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f138";
  font-weight: bold;
  position: absolute;
  text-align: center;
  color: #ffb03f;
  left: 10px;
}
div.lists_wrap32 ul li:after, div.lists_wrap32 ol li:after {
  background-color: #ffb03f;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: "POINT";
}

Pattern33

  • List Text
  • List Text
  • List Text
html
<div class="lists_wrap33">
<ul>
<li>List Text</li>
<li>List Text</li>
<li>List Text</li>
</ul>
</div>
css
div.lists_wrap33 {
  margin-bottom: 20px;
}
div.lists_wrap33 ul, div.lists_wrap33 ol {
  margin-top: 45px;
  padding: 0px 10px;
  text-align: left;
  list-style-type: none;
  border: solid 2px #ffb03f;
  position: relative;
}
div.lists_wrap33 ul li, div.lists_wrap33 ol li {
  padding: 10px 10px 10px 20px;
  border-bottom: dashed 1px silver;
}
div.lists_wrap33 ul li:last-child, div.lists_wrap33 ol li:last-child {
  border-bottom: none;
}
div.lists_wrap33 ul li:before, div.lists_wrap33 ol li:before {
  font-family: "Font Awesome 5 Free";
  content: "f00c";
  font-weight: bold;
  position: absolute;
  text-align: center;
  color: #ffb03f;
  left: 10px;
}
div.lists_wrap33 ul li:after, div.lists_wrap33 ol li:after {
  font-family: "Font Awesome 5 Free";
  background-color: #ffb03f;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 1px 7px;
  content: 'f0a7  Check';
}

[/sociallocker]