鉴于此图标：`<span class="material-symbols-outlined"> check_circle </span>`，悬停时，如何仅使图标内部变为绿色？

Question

我正在尝试将图标的背景颜色设置为绿色，但不会超出图标的圆形形状

我一直在尝试将 html 元素的边框与图标的形状相匹配，但元素的边框总是稍大一些，即使没有填充

Answer 1

这是一个例子。对于大多数情况来说，80% 的图标半径似乎就足够了。如果您愿意，您可以使用百分比。最好检查一下不同的浏览器。

var container = document.querySelector(".container")
for (var i = 10; i < 150; i++) {
  var span = document.createElement("span")
  span.style.fontSize = i + "px"
  span.classList.add("material-symbols-outlined")
  span.innerHTML = "check_circle"
  container.append(span)
}

.material-symbols-outlined {
  position: relative;
  cursor: default;
}

.material-symbols-outlined:hover::before {
  background: lightgreen;
  border-radius: 100%;
  position: absolute;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  z-index: -1;
  content: '';
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />

<div class="container"></div>