鼠标悬停时文本左右两侧线条展开动画实现求助

嘿，我懂你要的这种精致效果——鼠标一放到文本上，左右两边的线条就顺滑地拉满整个容器宽度对吧？用伪元素完全能搞定，大概率是你之前的布局逻辑没理顺，我给你个简洁省心的实现方案，用Flex布局来做最直观：

第一步：HTML结构 #

超级简单，只需要一个容器包裹你的文本就行：

<div class="text-with-lines">SOME TEXT</div>

第二步：CSS核心样式 #

用Flex布局控制元素排列，伪元素负责生成线条，配合过渡动画实现展开效果：

/* 父容器基础样式 */
.text-with-lines {
  display: flex;
  align-items: center; /* 让线条和文本垂直居中对齐 */
  gap: 1rem; /* 线条和文本之间的间距，可根据需求调整 */
  width: 100%; /* 让容器占满父级宽度，也可以设固定宽度比如800px */
  justify-content: center; /* 默认状态下文本居中，线条隐藏 */
}

/* 左右线条的伪元素 */
.text-with-lines::before,
.text-with-lines::after {
  content: '';
  height: 1px; /* 线条粗细，可按需调整 */
  background-color: #333; /* 线条颜色，换成你需要的色调 */
  flex-grow: 0; /* 初始状态不占用空间，线条默认隐藏 */
  width: 0;
  transition: all 0.3s ease; /* 动画过渡速度，0.3s是比较自然的节奏 */
}

/* 悬停时触发线条展开 */
.text-with-lines:hover::before,
.text-with-lines:hover::after {
  flex-grow: 1; /* 让两个伪元素平分容器剩余空间，自动拉满左右 */
}

额外自定义选项 #

如果你想要虚线线条，把伪元素的样式改成这样就行：

.text-with-lines::before,
.text-with-lines::after {
  content: '';
  border-top: 1px dashed #333; /* 虚线样式 */
  flex-grow: 0;
  width: 0;
  transition: all 0.3s ease;
}

要是觉得动画太快或太慢，调整transition里的0.3s数值即可，比如改成0.5s会更平缓。

这个方案的好处是不用手动计算宽度，Flex会自动帮你分配空间，兼容性也很好，主流浏览器都支持。

内容的提问来源于stack exchange，提问作者Callum