登录 注册

可以给分割线添加一个标题属性吗

可以给分割线添加一个属性，使分割线可以展示标题吗
例如

------------------------- 以下是 xxx --------------------------

------------------------- 以上是 xxx ------------------------
@88250

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28442 引用 • 119754 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    11151 引用 • 50642 回帖 • 52 关注
1 收藏
9 回帖
2
2
2
164 131 1 31

相关帖子

9 回帖
可以给分割线添加一个标题属性吗

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • leolee • • 1 赞同 • 2 评论
    订阅者 捐赠者 恶龙

    无法方便地将分割线显示为标题,但是可以比较方便地把标题显示为分割线.

    /* 将具有特定属性的6级标题显示为分割线样式 */
.h6[custom-display-type="divider"] [contenteditable="true"]{
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  color: var(--b3-theme-on-surface-light);
  font-weight: normal;
}

.h6[custom-display-type="divider"] [contenteditable="true"]::before,
.h6[custom-display-type="divider"] [contenteditable="true"]::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--b3-border-color);
  margin: 0 1rem;
}

/* 如果标题内容为空，只显示分割线 */
.h6[custom-display-type="divider"] [contenteditable="true"]:empty::before,
.h6[custom-display-type="divider"] [contenteditable="true"]:empty::after {
  margin: 0;
}

/* 可选：添加自定义属性支持 */
.h6[custom-divider-style="dashed"] [contenteditable="true"]::before,
.h6[custom-divider-style="dashed"] [contenteditable="true"]::after {
  border-bottom: 4px dashed;
}

.h6[custom-divider-style="dotted"] [contenteditable="true"]::before,
.h6[custom-divider-style="dotted"] [contenteditable="true"]::after {
  border-bottom: 4px dotted;
}

.h6[custom-divider-style="double"] [contenteditable="true"]::before,
.h6[custom-divider-style="double"] [contenteditable="true"]::after {
  border-bottom: 4px double;
}

/* 可选：自定义颜色 */
.h6[custom-divider-color] [contenteditable="true"]::before,
.h6[custom-divider-color] [contenteditable="true"]::after {
  border-bottom-color: var(--divider-color, var(--b3-border-color));
}

    image.png

    临时弄的,要用要把选择器改一下
    leolee • • 1 • 1 赞同
    @leolee 这个思路妙。六级标题确实用不上，从没用过。
    xnyshu •
  • 其他回帖
  • Wetoria •
    订阅者 付费者 捐赠者 恶龙

    阿西，没想到居然没有自定义属性。huaji 这块的不够彻底啊

  • sa--sa •
    订阅者 捐赠者 作者

    感觉确实难以实现了

  • queguaiya •
    付费者 捐赠者

    为什么分割线不能有块属性，虽然我理解分割线本身不能记录任何信息，但它也是一个块，应该和其他块保持统一吧

  • 查看全部回帖
sa--sa
回帖
58
 帖子
25
 积分
2287

近期热议

推荐标签 标签

  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 367 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    6 引用 • 144 回帖
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    269 引用 • 666 回帖 • 1 关注
  • AWS
    11 引用 • 28 回帖 • 2 关注
  • 安装

    你若安好，便是晴天。

    134 引用 • 1184 回帖 • 2 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    695 引用 • 538 回帖 • 1 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 236 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 342 关注
  • 创业

    你比 99% 的人都优秀么？

    81 引用 • 1396 回帖 • 1 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 63 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 475 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    34 引用 • 333 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 121 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎，基于 RESTful 接口。Elasticsearch 是用 Java 开发的，并作为 Apache 许可条款下的开放源码发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。

    117 引用 • 99 回帖 • 191 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 46 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    182 引用 • 400 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    43 引用 • 130 回帖 • 259 关注
  • abitmean

    有点意思就行了

    • 44 关注
  • 新人

    让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
    新手上路，请谨慎驾驶！

    52 引用 • 228 回帖
  • 电影

    这是一个不能说的秘密。

    125 引用 • 610 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 565 关注
  • 音乐

    你听到信仰的声音了么？

    63 引用 • 513 回帖
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    293 引用 • 4496 回帖 • 687 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖

最新标签