<ul>
  <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;
}

li:nth-child(1)::before {
  content: "梦开始的地方";
}

li:nth-child(1)::after {
  content: "(普通字符串)";
}

li:nth-child(2)::before {
  content: "🥰💞";
}

li:nth-child(2)::after {
  content: "(Emoji)";
}

li:nth-child(3)::before {
  content: "\2713";
}

li:nth-child(3)::after {
  content: "(特殊字符，HTML实体符)";
}

li:nth-child(4)::before {
  content: "(" "\2605" ")";
}

li:nth-child(4)::after {
  content: "(多字符拼接在一起)";
}