登录 注册

求标签样式 CSS 代码片段

本贴最后更新于 264 天前，其中的信息可能已经时移世异

类似下面图示这种样式的标签：在标签文字前面加“#”号，并添加底色和边框。

image.png

  • 思源笔记

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

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

    25744 引用 • 106536 回帖 • 1 关注
  • Q&A

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

    9867 引用 • 44846 回帖 • 77 关注
天津 位置
50 悬赏
6 收藏
5 回帖
2
2
462 127 228 1 3 102

相关帖子

被采纳的回答
  • Muu • • 1
    付费者

    标题标签

    /* 标题 标签 */
.b3-chip--secondary, .b3-chip--primary, .b3-chip--info, .b3-chip--success, .b3-chip--warning, 
.b3-chip--warning, .b3-chip--error, .b3-chip--pink {
    mix-blend-mode: normal !important;
}

.b3-chip--secondary::before, .b3-chip--primary::before, .b3-chip--info::before, .b3-chip--success::before, .b3-chip--warning::before, .b3-chip--warning::before, .b3-chip--error::before, .b3-chip--pink::before {
    content: "#" !important;
    margin-right: 5px;  /* # 号距离文字的距离 */
}

.protyle-background .b3-chip--secondary {
    color: #fff !important;
    background-color:  #d6ff0070 !important;
}
.protyle-background .b3-chip--primary {
    color: #fff !important;
    background-color: #0053f9c4 !important;
}
.protyle-background .b3-chip--info {
    color: var(--b3-card-info-color) !important;
    background-color: #28405c !important;
}
.protyle-background .b3-chip--success {
    color: var(--b3-card-success-color) !important;
    background-color: #425347 !important;
}
.protyle-background .b3-chip--warning {
    color: var(--b3-card-warning-color) !important;
    background-color: #554636 !important;
}
.protyle-background .b3-chip--error {
    color: var(--b3-card-error-color) !important;
    background-color: #442724 !important;
}
.protyle-background .b3-chip--pink {
    color: var(--b3-theme-on-secondary) !important;
    background-color: #ea4aaa96 !important;
}

​

    image.png

    行级标签

    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    --tag-color: #97B9DA;
    font-size: 80%;
    border-radius: 1em;
    padding: .1em .5em .15em;
    border: none;
    box-shadow: 0 0 0 .065em inset var(--tag-color);
    background-color: #28405c !important;
    color: var(--tag-color) ;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.protyle-wysiwyg [data-node-id] span[data-type~=tag]::before {
    content: "#" !important;
    margin-right: 5px;  /* # 号距离文字的距离 */
}

​

    image.png

5 回帖
求标签样式 CSS 代码片段

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • sweesalt •
    订阅者 作者

    标签在行尾换行处会被断开，麻烦看能不能修正一下代码。

    image.png

    @Muu

    1 回复
    1 操作
    sweesalt 在 2024-09-25 10:57:44 更新了该回帖
  • 其他回帖
  • Muu • • 1
    付费者

    标题标签

    /* 标题 标签 */
.b3-chip--secondary, .b3-chip--primary, .b3-chip--info, .b3-chip--success, .b3-chip--warning, 
.b3-chip--warning, .b3-chip--error, .b3-chip--pink {
    mix-blend-mode: normal !important;
}

.b3-chip--secondary::before, .b3-chip--primary::before, .b3-chip--info::before, .b3-chip--success::before, .b3-chip--warning::before, .b3-chip--warning::before, .b3-chip--error::before, .b3-chip--pink::before {
    content: "#" !important;
    margin-right: 5px;  /* # 号距离文字的距离 */
}

.protyle-background .b3-chip--secondary {
    color: #fff !important;
    background-color:  #d6ff0070 !important;
}
.protyle-background .b3-chip--primary {
    color: #fff !important;
    background-color: #0053f9c4 !important;
}
.protyle-background .b3-chip--info {
    color: var(--b3-card-info-color) !important;
    background-color: #28405c !important;
}
.protyle-background .b3-chip--success {
    color: var(--b3-card-success-color) !important;
    background-color: #425347 !important;
}
.protyle-background .b3-chip--warning {
    color: var(--b3-card-warning-color) !important;
    background-color: #554636 !important;
}
.protyle-background .b3-chip--error {
    color: var(--b3-card-error-color) !important;
    background-color: #442724 !important;
}
.protyle-background .b3-chip--pink {
    color: var(--b3-theme-on-secondary) !important;
    background-color: #ea4aaa96 !important;
}

​

    image.png

    行级标签

    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    --tag-color: #97B9DA;
    font-size: 80%;
    border-radius: 1em;
    padding: .1em .5em .15em;
    border: none;
    box-shadow: 0 0 0 .065em inset var(--tag-color);
    background-color: #28405c !important;
    color: var(--tag-color) ;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.protyle-wysiwyg [data-node-id] span[data-type~=tag]::before {
    content: "#" !important;
    margin-right: 5px;  /* # 号距离文字的距离 */
}

​

    image.png

    2 回复
  • Muu •
    付费者

    把整个标签 改成行级块应该就就行了 display: inline-block;

    将我上面评论的代码的行级标签改为如下代码即可

    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    --tag-color: #97B9DA;
    font-size: 80%;
    border-radius: 1em;
    padding: .1em .5em .15em;
    border: none;
    box-shadow: 0 0 0 .065em inset var(--tag-color);
    background-color: #28405c !important;
    color: var(--tag-color);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline-block;
}
.protyle-wysiwyg [data-node-id] span[data-type~=tag]::before {
    content: "#" !important;
    margin-right: 5px;  /* # 号距离文字的距离 */
}
​

    效果图

    20240926093855.gif

    1 回复
  • sweesalt •
    订阅者 作者

    谢谢，可以了

  • 查看全部回帖
sweesalt
天津
回帖
275
 帖子
68
 积分
8729

近期热议

推荐标签 标签

  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议，并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想，是一个性能稳定的多用户网络操作系统。

    954 引用 • 944 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 486 关注
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    90 引用 • 122 回帖 • 623 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 543 关注
  • 叶归
    9 引用 • 41 回帖 • 20 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • Elasticsearch

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

    117 引用 • 99 回帖 • 198 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 7 关注
  • SVN

    SVN 是 Subversion 的简称，是一个开放源代码的版本控制系统，相较于 RCS、CVS，它采用了分支管理系统，它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 690 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 3 关注
  • App

    App（应用程序，Application 的缩写）一般指手机软件。

    91 引用 • 384 回帖
  • Typecho

    Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。

    12 引用 • 67 回帖 • 446 关注
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖 • 1 关注
  • 小说

    小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    32 引用 • 108 回帖 • 1 关注
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1794 回帖 • 8 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 2 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发，最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 12 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器，详细介绍请看 将 Java Swing 应用变成 Web 应用 。

    1 引用 • 15 回帖 • 637 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖 • 1 关注
  • BND

    BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。

    107 引用 • 1281 回帖 • 34 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    59 引用 • 25 回帖 • 2 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 122 关注
  • 自由行
    • 1 关注
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 6 关注
  • SQLite

    SQLite 是一个进程内的库，实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖 • 8 关注
  • 支付宝

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

    29 引用 • 347 回帖

最新标签