<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 130%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none outside none;
}

li {
  margin: 2vh 0;
  display: flex;
  align-items: center;
}

li::before,
li::after {
  content: " ";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1vh;
}

li::before {
  margin-right: 2vh;
  width: 4vh;
  height: 4vh;
}

li:nth-child(1)::before {
  content: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/144736/marker-icon.png");
}

li:nth-child(1)::after {
  content: "(通过url引入一张图片)";
}

li:nth-child(2)::before {
  content: linear-gradient(to right, #f36, #90f);
}

li:nth-child(2)::after {
  content: "(CSS linear gradient)";
}

li:nth-child(3)::before {
  content: radial-gradient(circle at center, #ff5722 70%, transparent);
}

li:nth-child(3)::after {
  content: "(CSS radial gradient)";
}

li:nth-child(4)::before {
  content: repeating-linear-gradient(
    to right,
    #e91e60 25%,
    #ff9800 50%,
    #f09 75%,
    #09f 100%
  );
}

li:nth-child(4)::after {
  content: "(CSS repeating linear gradient)";
}

li:nth-child(5)::before {
  content: repeating-radial-gradient(
    circle at center,
    #f90 25%,
    #90a 50%,
    #af09af 75%,
    transparent 100%
  );
}

li:nth-child(5)::after {
  content: "(CSS repeating radial gradient)";
}

li:nth-child(6)::before {
  content: conic-gradient(red, orange, yellow, green, blue);
}

li:nth-child(6)::after {
  content: "(CSS conic gradient)";
}

li:nth-child(7)::before {
  content: repeating-conic-gradient(
    blue,
    green,
    yellow,
    orange,
    red,
    orange,
    yellow,
    green,
    blue
  );
}

li:nth-child(7)::after {
  content: "(CSS repeating conic gradient)";
}