文章标题动态小横线

最后更新于: 2025-12-06 17:39:04

文章标题动态小横线

2025年3月4日测试成功。

版权

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

环境

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

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

效果

配置

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

 1/*文章标题动态小横线     2025年3月4日22:30:40 ---start*/
 2.post-list .post .title-wrapper a {
 3  position: relative;
 4  display: inline-block;
 5  transition: color 0.3s ease;
 6}
 7
 8.post-list .post .title-wrapper a:hover {
 9  color: rgb(0 118 255);
10}
11
12.post-list .post .title-wrapper a::after {
13  content: '';
14  position: absolute;
15  left: 50%; /* 从中间开始 */
16  bottom: -2px;
17  width: 0; /* 初始宽度为0 */
18  height: 2px;
19  background: rgb(0 118 255);
20  transform: translateX(-50%); /* 居中定位 */
21  transition: 
22  width 0.3s ease-out,
23  left 0.3s ease-out; /* 添加 left 的过渡 */
24}
25
26.post-list .post .title-wrapper a:hover::after {
27  left: 50; /* 扩展到最左侧 */
28  width: 100%; /* 宽度充满容器 */
29}
30/*文章标题动态小横线     2025年3月4日22:30:40 ---end*/