效果

今天在写Emlog百度小程序的时候发现原来的标题样式太丑了，简简单单改一下吧，本文代码可直接放在brief网站主题里面。

before伪元素选择器

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。

代码实现

先整体设置

 h1,h2,h3,h4,h5,h6{
  position: relative;
  padding-bottom: 8px;
}
h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{
  width: 40px;
  height: 3px;
  position: absolute;
  content: '';
  top: auto;
  left: 0;
  bottom: 3px;
  border-radius: 3px;
  transition: 4s;
}

然后单个设置颜色

h1:before{
  background-image:linear-gradient(to right ,green,rgb(4, 46, 4));
  box-shadow: 1px 1px 3px -1px green;
}

h2:before{
  background-image:linear-gradient(to right ,#f17c67,#971903);
  box-shadow: 1px 1px 3px -1px #f17c67;
}

这两个时示例其他的需要你自己添加

获取完整代码

如果您的网站主题是brief可直接替换markdown.css文件
文件地址：

https://www.hkiii.cn/content/templates/brief/css/markdown.css