本文主要是介绍博客园-awescnb插件-geek皮肤优化-目录优化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
💖简介
博客园-awescnb插件-geek皮肤下，文章内容目录显示优化：鼠标移入显示、目录展开/收起图标。
⭐优化
🌟鼠标移入显示
- 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
添加代码
#catalog ul li a:hover {background: rgba(80, 80, 80, .04);color: #807dd4;}
鼠标移入展示不同背景
🌟展开/收起图标
- 定义自定义CSS
博客园->管理->设置->页面定制 CSS 代码
添加代码
h3.catalog-title:before {content: '📖';position: relative;display: block;right: 10px;}
h3.catalog-title:after {font-weight: 900;transform: rotate(90deg);content: "\25B2";font-variant: normal;text-rendering: auto;display: flex;background: 0 0;position: absolute;top: 0;bottom: 0;right: 15px;justify-content: center;align-items: center;transition: transform .2s ease, -webkit-transform .3s ease;font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;}
h3.catalog-title.is-active:after{transform: rotate(180deg);}
为目录前增加图标
目录展开/收起增加图标及切换动画
结束
这篇关于博客园-awescnb插件-geek皮肤优化-目录优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
