WordPress教程：分享一个简单实用的标题+分割线布局样式（适用子比主题）

这段代码很简单，适合初学者或者不想花太多时间在样式上的朋友们。代码可以直接复制使用，非常方便。兼容子比主题的深色模式.

演示示例

如何在Wordpress主题或Zibll主题中使用

• 登录WordPress后台
• 进入外观设置：在后台左侧菜单中，找到“外观”选项，点击它，然后选择“小工具”。
• 添加自定义HTML小工具：在“小工具”页面，你可以看到很多可以拖放的小工具。找到“自定义HTML”这个小工具，然后把它拖到你想要展示的区域（比如侧边栏或页脚）。
• 插入代码：在“自定义HTML”小工具中，复制并粘贴我们提供的HTML和CSS代码：

代码示例：

<div class="emoji-container">
    <div class="emoji-title">最新文章</div>
    <div class="emoji-separator emoji-sub emoji-sm">学无止境，活到老，学到老</div>
</div>

<style>
    .emoji-container{display:flex;flex-direction:column;align-items:center;text-align:center}
    .emoji-separator:before,.emoji-separator:after{content:"";background:#777;flex:1;height:1px;margin:0 10px;max-width:16%}
    .emoji-separator{display:flex;align-items:center;justify-content:center;width:100%}
    .emoji-sub{color:#8c92a1!important}
    .emoji-sm{font-size:14px}
    .emoji-title{font-size:24px;font-weight:bold;color:green}
    body.dark-theme .emoji-title{color:lightgreen}
    body.dark-theme .emoji-sub{color:#b0b3b8!important}
    body.dark-theme .emoji-separator:before,body.dark-theme .emoji-separator:after{background:#555}
</style>