登录注册

求标签样式 CSS 代码片段

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

思源笔记

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

融合块、大纲和双向链接，重构你的思维。
22338 引用 • 89383 回帖
Q&A

提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
8112 引用 • 37002 回帖 • 160 关注

sweesalt 2 个月前天津位置

50 悬赏

6 收藏

5 回帖

199 109 85 1 3

标题标签

/* 标题 标签 */
.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;
}

行级标签

.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;  /* # 号距离文字的距离 */
}

5 回帖

求标签样式 CSS 代码片段

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

Muu • 2 个月前 • 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;
}

行级标签

.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;  /* # 号距离文字的距离 */
}

2 回复

其他回帖
sweesalt • 1 个月前
订阅者作者

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

@Muu

1 回复

1 操作
sweesalt 在 2024-09-25 10:57:44 更新了该回帖
sweesalt • 1 个月前
订阅者作者

谢谢，可以了
Matttttt • 2 个月前
订阅者付费者

感谢大佬 😋
查看全部回帖

sweesalt

天津

回帖

226

帖子

积分

2308

近期热议

推荐标签标签

黑曜石

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

A second brain, for you, forever.

15 引用 • 122 回帖
Hadoop

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

OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。
10 引用 • 4 关注
DevOps

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

RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。
4 引用 • 6 回帖 • 51 关注
CSS

CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
198 引用 • 550 回帖
PWA

PWA（Progressive Web App）是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术，在网页应用中实现和原生应用相近的用户体验。
14 引用 • 69 回帖 • 154 关注
Oracle

Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。
105 引用 • 127 回帖 • 382 关注
CSDN

CSDN (Chinese Software Developer Network) 创立于 1999 年，是中国的 IT 社区和服务平台，为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务，满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。
14 引用 • 155 回帖
运维

互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。
149 引用 • 257 回帖
Swift

Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。
36 引用 • 37 回帖 • 529 关注
以太坊

以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。
34 引用 • 367 回帖
Ant-Design

Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。
17 引用 • 23 回帖
Google

Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。
49 引用 • 192 回帖 • 1 关注
BND
BND（Baidu Netdisk Downloader）是一款图形界面的百度网盘不限速下载器，支持 Windows、Linux 和 Mac，详细介绍请看这里。
- BND1 简介和使用方式
- BND2 技术架构篇
107 引用 • 1281 回帖 • 27 关注
招聘

哪里都缺人，哪里都不缺人。
190 引用 • 1057 回帖
Gitea

Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。
4 引用 • 16 回帖 • 5 关注
iOS

iOS 是由苹果公司开发的移动操作系统，最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统，最初是设计给 iPhone 使用的，后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样，属于类 Unix 的商业操作系统。
85 引用 • 139 回帖 • 1 关注
安全

安全永远都不是一个小问题。
199 引用 • 816 回帖 • 1 关注
Flume

Flume 是一套分布式的、可靠的，可用于有效地收集、聚合和搬运大量日志数据的服务架构。
9 引用 • 6 回帖 • 629 关注
Typecho

Typecho 是一款博客程序，它在 GPLv2 许可证下发行，基于 PHP 构建，可以运行在各种平台上，支持多种数据库（MySQL、PostgreSQL、SQLite）。
12 引用 • 65 回帖 • 437 关注
代码片段

代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。
69 引用 • 372 回帖
IDEA

IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。
180 引用 • 400 回帖
Sym
Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

下一代的社区系统，为未来而构建
- Sym 安装指南
- 客户端 API 文档
524 引用 • 4601 回帖 • 700 关注
Node.js

Node.js 是一个基于 Chrome JavaScript 运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动，非阻塞 I/O 模型而得以轻量和高效。
139 引用 • 269 回帖 • 43 关注
Latke

Latke 是一款以 JSON 为主的 Java Web 框架。
71 引用 • 535 回帖 • 787 关注
Android

Android 是一种以 Linux 为基础的开放源码操作系统，主要使用于便携设备。2005 年由 Google 收购注资，并拉拢多家制造商组成开放手机联盟开发改良，逐渐扩展到到平板电脑及其他领域上。
334 引用 • 323 回帖

求标签样式 CSS 代码片段

相关帖子

云端存储服务提供商网络连通性校验异常

有没有什么同步比较快的办法

关于 docker 端的发布功能

底部反链与笔记整理的问题

思源图床建议

请问无法剪藏思源链滴里面的文章是什么原因

思源笔记剪藏问题

标题标签

行级标签

欢迎来到这里！

标题标签

行级标签

近期热议

推荐标签标签

最新标签

求标签样式 CSS 代码片段

相关帖子

云端存储服务提供商网络连通性校验异常

有没有什么同步比较快的办法

关于 docker 端的发布功能

底部反链与笔记整理的问题

思源图床建议

请问无法剪藏思源链滴里面的文章是什么原因

思源笔记剪藏问题

标题标签

行级标签

欢迎来到这里！

标题标签

行级标签

近期热议

推荐标签 标签

最新标签

推荐标签标签