html - li 内的可点击图标和文本

Question

除了图标，我还有一个图标和文字。我使图标可点击，但不能使文本也可点击。这看起来很简单，但我尝试了不同的方法，但无法实现。

DEMO

Answer 1

在 span 元素上使用 cursor: pointer; ;)

问题是 a 元素(默认情况下具有 cursor: pointer; 属性)不包含 span 上的文本> 元素)

编辑

正如@Justinas 所说，它不会以这种方式触发链接。因此，您必须在span 元素 之后关闭a 标记。

为了保持它的良好风格，here's the working code.

i {
      border-radius: 50%;
    border: 2px solid green;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 25px !important;
    color: green;
}
a { text-decoration: none !important; display: inline-block }