仅当鼠标悬停在文本或图标上时，它才应单击

Question

此文本Test Button可以单击以执行一些活动，但是由于默认情况下宽度为100％，因此在也可以单击文本之后将鼠标悬停在空白处。我们可以减小宽度，但问题是必须有100％的宽度的底部边框

Answer 1

也许尝试将文本包裹在一个跨度中，然后在其中添加onclick-

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  outline: 0;
  border: 0;
  padding: 2px;
  color: #666;
  font-size: 12px;
  display: block;
  width: 100%;
  border-bottom: 2px solid green; 
  text-align: left;
}

button span {
  cursor: pointer;
}

button svg { 
  display: inline;
  width:  9px;
  height: 9px;
  margin-right: 9px
}

<button>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path stroke="currentcolor" stroke-width="2" fill="none" d="M1 1h14v14H1z M3 8h10M8 3v10"/></svg>
  <span onclick="alert('add onclick to span')">TEST BUTTON</span> 
</button>