在链接悬停时展开项目符号答案

【问题标题】：Expanding bullets on link hover在链接悬停时展开项目符号
【发布时间】：2021-12-24 15:31:22
【问题描述】：

我正在尝试创建一个在悬停时扩展伪元素 before 的链接。

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

&lt;a class="open-link" href="#"&gt;Link&lt;/a&gt;

但是过渡很奇怪，看起来点从底部跳了出来。如何平滑它并使其看起来像从左侧扩展？

小提琴https://jsfiddle.net/1u0tzxfg/

更新

这里有一个更好的过渡：

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

&lt;a class="open-link" href="#"&gt;Link&lt;/a&gt;

【问题讨论】：

这是因为您设置了宽度 = 10px，并且文本超出了链接
这是故意的，因为如果我设置那么将不起作用并且过渡不会平滑。

标签： css hyperlink pseudo-element

【解决方案1】：

只需将：white-space: nowrap; 添加到 .open-link::before 标记即可。

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

【讨论】：