Les balles qui s'épanouissent sur le lien hover

Question 1

Je suis en train de faire un lien qui se développe pseudo-élément avant sur le vol stationnaire.

.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>

Mais la transition est plutôt bizarre et il semble que les points de saut à partir du bas. Comment faire pour lisser et donner l'impression qu'ils étendre à partir de la gauche?

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

Mise à JOUR

Voici un peu mieux la 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>

Question 2

Juste ajouter: white-space: nowrap; à la .ouvrez-lien::avant la balise.

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

botivegh · Answer 1 · 2021-11-12T09:27:10

Juste ajouter: white-space: nowrap; à la .ouvrez-lien::avant la balise.

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

Les balles qui s'épanouissent sur le lien hover

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie