Question

我想在不影响其伪元素（：after）的情况下缩放元素。这可能吗？
以下链接演示了我要完成的任务：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃39;点＆＃39;用元素缩放。

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 Scale元素不影响：after伪元素

1 个答案: