对blogus主题字体样式的美化

blogus是一款非常不错的wordpress主题，不过是老外开发的，对中文字体的样式支持不是太好，这不，我优化的了h1,h2,h3，代码如下：

/* === 修复版：H1 无竖线 | H2 有竖线 | H3 有横线 === */

/* ===== H1：24px，无装饰 ===== */
h1,
h1.entry-title,
.site-main h1,
.entry-content h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-top: 1.8em !important;
    margin-bottom: 1.2em !important;
    /* 确保没有左侧 padding，避免留空 */
    padding-left: 0 !important;
}

/* ===== H2=== */
h2,
h2.entry-title,
.entry-content h2,
.wp-block-heading h2 {
    position: relative;
    font-size: 22px !important;
    color: #409eff !important;
    line-height: 1.4 !important;
    padding-left: 16px !important;
    margin-top: 1.5em !important;
    margin-bottom: 1.4em !important;
}

/* 单独处理 Blogier 文章列表中的 .title（但仅当它是 H2 或 A 标签内） */
.bs-blog-post .title {
    position: relative;
    font-size: 22px !important;
    color: #409eff !important;
    line-height: 1.4 !important;
    padding-left: 0px !important;
    margin-top: 1.5em !important;
    margin-bottom: 1em !important;
    display: block;
}

/* H2 和 .title 的竖线（排除 H1） */
h2::before,
h2.entry-title::before,
.entry-content h2::before,
.wp-block-heading h2::before,
.bs-blog-post .title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.2em;
    background-color: #409eff !important;
    border-radius: 2px;
}

/* 显式移除 H1 的任何竖线（防御性重置） */
h1::before,
h1.entry-title::before,
.site-main h1::before,
.entry-content h1::before {
    display: none !important;
}


/* ===== H3：20px + 底部横线（默认为容器宽 50%，悬停轻微右延） ===== */
h3,
h3.widget-title,
.wp-block-heading h3,
.entry-content h3 {
    position: relative;
    font-size: 20px !important;
    line-height: 1.4 !important;
    padding-bottom: 6px !important;
    margin: 1.2em 0 1em !important;
    display: inline-block; /* 关键：让容器宽度贴合文字 */
}

h3::after,
h3.widget-title::after,
.wp-block-heading h3::after,
.entry-content h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;               /* 默认：文字区域的一半（因 inline-block）*/
    height: 2px;
    background-color: #0073aa;
    transition: width 0.25s ease, transform 0.25s ease; /* 平滑动画 */
}

h3:hover::after,
h3.widget-title:hover::after,
.wp-block-heading h3:hover::after,
.entry-content h3:hover::after {
    width: 60%;               /* 悬停：轻微延长到 60%，产生“往右动一下”感 */
}

/* === 追加到您现有 CSS 的最底部 === */
.bs-blog-post .title::before {
    display: none !important;
}

把以上代码，外观--->自定义-->额外CSS，添加其中，然后发布，这样你看是不是样式漂亮多呢？