【网页美化】3款“标题标签”H1-H6标签样式美化

样式一

样式二

样式三

示例代码只改了H3，其他的自行根据喜好修改哈

个人比较钟意样式一和样式二，你呢？

使用方法

主题后台->外观布局->自定义代码->自定义Css代码（电脑端）->自定义css代码 (移动端)

代码如下

-----------------------------------样式一---------------------------------------
h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 18px 0;
    border-bottom: 1px solid #eaeaea;
    padding-left: 26px;
}
h3:before {
    position: absolute;
    left: 0em;
    display: block;
    content: '##';
    color: #f72d84;
}
-----------------------------------样式二---------------------------------------
h3 {
    position: relative;
    padding: 5px 0 15px;
    color: #424242;
    font-size: 18px;
    display: -webkit-inline-box;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    z-index: 16;
    font-weight: 700;
    line-height: 30px;
}
h3:hover:before {
    width: 100%;
    transition: all .5s;
}

h3:before {
    position: absolute;
    top: 35px;
    left: 0;
    z-index: -1;
    width: 45%;
    height: 2px;
    background: #1b54bc;
    content: " ";
    border-radius: 20px;
    transition: all .5s;
}
-----------------------------------样式三---------------------------------------
h3 {
    font-size: 18px;
    padding: 8px;
    line-height: 28px;
    background: #fafafa;
    border-left: 4px solid #0c85ff;
}