博客园给文章标题添加下划线动画

应用于随笔分类、随笔档案等页面,在博客园首页不展示效果。

  1. 打开博客园后台 -> 设置 -> 页面定制CSS代码

  2. 插入如下代码

/* 设置文章标题下划线滑动效果 */
.entrylistItemTitle{
  position: relative;
  text-decoration: none !important;
}
.entrylistItemTitle:before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: #258fb8;
  transition: all .3s ease-in-out;
}
.entrylistItemTitle:hover:before{
  width: 100%;
  left: 0;
  right: 0;
}
posted @ 2021-08-20 21:44  小陆斑比  阅读(149)  评论(0编辑  收藏  举报