文章标题动态小横线

文章标题动态小横线

2025年3月4日测试成功。

版权

次配置来源于《Hyde Blog》大佬贡献的代码，十分感谢大佬，大佬威武💖💖。

环境

自己开源的 《vuepress-theme-vdoing-one-public》网站模板。

此模板是在Young Kbt blog的开源项目《Kele-Bingtang.github.io》基础上修改为自己的风格而成，感谢大佬开源的模板&感谢原作者开源的vdoing主题。❤️❤️

效果

配置

（1）在docs\.vuepress\styles\palette.styl文件内容末尾添加如下代码：

/*文章标题动态小横线     2025年3月4日22:30:40 ---start*/
.post-list .post .title-wrapper a {
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.post-list .post .title-wrapper a:hover {
  color: rgb(0 118 255);
}

.post-list .post .title-wrapper a::after {
  content: '';
  position: absolute;
  left: 50%; /* 从中间开始 */
  bottom: -2px;
  width: 0; /* 初始宽度为0 */
  height: 2px;
  background: rgb(0 118 255);
  transform: translateX(-50%); /* 居中定位 */
  transition: 
  width 0.3s ease-out,
  left 0.3s ease-out; /* 添加 left 的过渡 */
}

.post-list .post .title-wrapper a:hover::after {
  left: 50; /* 扩展到最左侧 */
  width: 100%; /* 宽度充满容器 */
}
/*文章标题动态小横线     2025年3月4日22:30:40 ---end*/

（2）运行测试