可以在列表中的两个项目之间绘制箭头（使用SVG？）

Question

我想在列表中的两个项目之间绘制一个箭头。这可能使用普通的旧SVG吗？

这就是我想要的样子：

我知道如何使用此HTML执行除外部箭头之外的所有操作：

<ol>
  <li>z ← 1</li>
  <li>z ← y × z</li>
  <li>z ← 2 × z</li>
</ol>

和CSS：

ol {
  border: 1px solid black;
  display: inline-block;
  padding-left: 0em;
  padding: 3px;
}

老实说，我甚至不关心我是否使用SVG。如果这可以使用Canvas或CSS或HTML或我不太关心的任何事情来完成。虽然我不喜欢javascript，但如果我需要它，我会使用它。我正在解决这个问题！

Answer 1

这是一种方法。

＆＃13;

＆＃13;

.equation {
  position: relative;
  display: inline-block;
  width: 5em;
  font-style: italic;
}

＆＃13;

<ol>
  <li><span class="equation">z &#10229; 1</span></li>
  <li>
    <span class="equation to">z &#10229; y &#215; z</span>
    <svg height="1em" viewBox="0 0 60 30" fill="none" stroke="black" stroke-width="1" overflow="visible">
      <polyline points="0.5,15.5,59.5,15.5,59.5,35"/>
      <polyline points="10.5,8.5,0.5,15.5,10.5,22.5"/>
    </svg>
  </li>
  <li>
    <span class="equation">z &#10229; 2 &#215; z</span>
    <svg height="1em" viewBox="0 0 60 30" fill="none" stroke="black" stroke-width="1" overflow="visible">
      <polyline points="0.5,15.5,59.5,15.5,59.5,-5"/>
    </svg>
  </li>
</ol>

＆＃13;

＆＃13;

＆＃13;

这不是最灵活的方法。例如，它对行高度变化不太宽容。但它希望能给你一个开始的地方。