CSS Scale element without affecting :after pseudo-element

Question

I would like to scale an element without affecting its pseudo-element (:after). Is that possible?
The following link demonstrates what I am trying to accomplish:

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' is scaled with the element.

Answer 1

Since the pseudo element is applied to li you can simply scale the a. Don't forget to make it at least inline-block as 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>