欢迎光临
我们一直在努力

CoreNext主题:给你的文章装饰”H4″、”H5″、”H6″标签

原来CoreNext主题是没有美化H4"、"H5"、"H6"标签,博主在这里增加了一下布局效果

转自:优享云博客

效果

H4标签:

这是一个H4标签的内容

H5标签:

这是一个H5标签的内容

H6标签:

这是一个H6标签的内容

代码

CoreNext 主题设置:插入代码 > 自定义CSS > 插入下方代码即可完成
[reply]
/* H4标签 */
.post-warp .content-warp h4::before {
  content: "➤"; /* 你可以根据需要替换为其他图标或字符 */
  margin-right: 0.5em; /* 可以根据需要调整箭头与文字之间的距离 */
  color: #000000; /* 设置箭头颜色为蓝色 */
}

/* H5标签 */
.post-warp .content-warp h5::before {
  content: " ";
  display: inline-block;
  width: 10px; /* 装饰元素的宽度 */
  height: 10px; /* 装饰元素的高度 */
  margin-right: 8px; /* 可以根据需要调整装饰元素与文字之间的距离 */
  background-color: #3498db; /* 装饰元素的背景颜色,这里是蓝色,你可以根据需要调整 */
  border-radius: 50%; /* 使装饰元素呈现圆形 */
}

/* H6标签 */
.post-warp .content-warp h6::before {
  content: "◆"; /* 你可以根据需要替换为其他图标或字符 */
  margin-right: 0.5em; /* 可以根据需要调整形状与文字之间的距离 */
  color: green; /* 设置形状颜色,这里是绿色,你可以根据需要调整 */
}
[/reply]

 


赞(9) 打赏
未经允许不得转载:VE » CoreNext主题:给你的文章装饰”H4″、”H5″、”H6″标签

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册