I'm trying to make a link that expands pseudo-element before on hover.

.open-link::before {
      content: '•';
      position: relative;
      display: inline-block;
      width: 10px;
      transition: width .3s;
      margin-right: 10px;
    }
.open-link:hover::before {
      content: '• • •';
      width: 30px;
 }

<a class="open-link" href="#">Link</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

But the transition is rather weird and it looks like the dots jump from the bottom. How to smooth it and make it look like they expand from the left?

Fiddle https://jsfiddle.net/1u0tzxfg/

UPDATE

Here's a bit better transition:

.open-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.open-link::before {
    content: '• • •';
    overflow: hidden;
    width: 10px;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    margin-right: 10px;
    white-space: nowrap;
}
.open-link:hover::before {
    width: 50px;
}

<a class="open-link" href="#">Link</a>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just add: white-space: nowrap; to the .open-link::before tag.

<style>
  .open-link::before {
    content: '•';
    position: relative;
    display: inline-block;
    width: 10px;
    transition: width .3s;
    margin-right: 10px;
    white-space: nowrap;
  }
  
  .open-link:hover::before {
    content: '• • •';
    width: 30px;
  }
</style>

<a class="open-link" href="#">Link</a>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>