CSS 在不影响 :after 伪元素的情况下缩放元素

Question

我想在不影响其伪元素 (:after) 的情况下缩放元素。这可能吗？
以下 link 演示了我要完成的工作：

ul {
  list-style-type: none;
  margin: 0 auto;
}

li {
  float: left;
  margin-left: 10px;
  transition: .2s all cubic-bezier(.250, .460, .450, .940);
}

li:hover {
  transform: scale(1.1);
}

li:not(:last-child)::after {
  content: '•';
  margin-left: 10px;
}

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>

'dot'随元素缩放。

Answer 1

由于伪元素应用于 li，您可以简单地缩放 a。不要忘记至少 inline-block 为 the transformation won't work with inline element.

ul {
  list-style-type: none;
  margin: 0 auto;
}

li {
  float: left;
  margin-left: 10px;
}

li a {
  display: inline-block;
  transition: .2s all cubic-bezier(.250, .460, .450, .940);
}

li:hover a {
  transform: scale(1.1);
}

li:not(:last-child)::after {
  content: '•';
  margin-left: 10px;
}

<ul>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
  <li><a>Hello</a></li>
</ul>

CSS 在不影响 :after 伪元素的情况下缩放元素

CSS Scale element without affecting :after pseudo-element

css

pseudo-element

css-transforms