CSS 기술을 사용하여 쉐브론 화살표를 어떻게 만들 수 있나요?

<code class="css">ul {
  list-style: none;
}

ul.big {
  list-style: none;
  font-size: 300%
}

li::before {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}

li:hover {
  color: red; /* For the text */
}

li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}</code>

<code class="html"><ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

<ul class="big">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul></code>