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

本文主要是介绍博客园给文章标题添加下划线动画，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

这篇关于博客园给文章标题添加下划线动画的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！