子比主题美化 – 文章页面自定义h2，h3标题美化

效果1

教程开始

将下面代码放入自定义css中即可

.article-content>.wp-posts-content>h2,
.article-content .wp-posts-content>h3 {
    z-index: 1
}

.article-content>.wp-posts-content>h2:hover:before,
.article-content>.wp-posts-content>h2:hover:after,
.article-content>.wp-posts-content>h3:hover:before,
.article-content>.wp-posts-content>h3:hover:after {
    transform: scale(1.2) !important;
    transform-origin: center !important;
    transition: .4s
}

.article-content .wp-posts-content h2:before,
.article-content .wp-posts-content h3:before {
    box-shadow: none !important;
    opacity: .6 !important;
    border-radius: 50% !important;
    top: -5px !important;
    left: -10px !important;
    z-index: 1
}

.article-content .wp-posts-content h2:before,
.article-content .wp-posts-content h2:after {
    background: linear-gradient(#00ff62, transparent) !important
}

.article-content .wp-posts-content h3:before,
.article-content .wp-posts-content h3:after {
    background: linear-gradient(#ff9800, transparent) !important
}

.article-content .wp-posts-content h2:before {
    height: 30px !important;
    width: 30px !important
}

.article-content .wp-posts-content h3:before {
    height: 25px !important;
    width: 25px !important
}

.article-content .wp-posts-content h2:after,
.article-content .wp-posts-content h3:after {
    content: "";
    opacity: .6;
    position: absolute;
    transition: .4s;
    border-radius: 50%
}

.article-content .wp-posts-content h2:after {
    top: -15px;
    left: 15px;
    width: 10px;
    height: 10px
}

.article-content .wp-posts-content h3:after {
    top: -17px;
    left: 12px;
    width: 8px;
    height: 8px
}

效果2

教程开始

将下面代码放入自定义css中即可

.title-theme {
    padding: 0px 0px 0px 45px!important;
    background: url(/demo/h2.png) 10px center no-repeat;
    background-size: 30px 20px;
    color: #566889;
}
.title-theme:before {
    display:none;
}
.wp-posts-content>h1{
    padding: 0px 0px 0px 45px!important;
    background: url(/demo/h2.png) 10px center no-repeat;
    background-size: 30px 20px;
}
.wp-posts-content>h2{
    padding: 0px 0px 0px 45px!important;
    background: url(/demo/h2.png) 10px center no-repeat;
    background-size: 30px 20px;
}
.wp-posts-content>h3{
    padding: 0px 0px 0px 45px!important;
    background: url(/demo/h3.png) 10px center no-repeat;
    background-size: 30px 30px;
}
.wp-posts-content>h1:before{
    display:none;
}
.wp-posts-content>h2:before{
    display:none;
}
.wp-posts-content>h3:before{
    display:none;
}