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>