Expanding bullets on link hover

November 12, 2021

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>

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/

>Solution :

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>