登录注册

求标签样式 CSS 代码片段

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

思源笔记

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

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

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

sweesalt 3 个月前天津位置

50 悬赏

6 收藏

5 回帖

244 111 127 1 3 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;  /* # 号距离文字的距离 */
}

5 回帖

求标签样式 CSS 代码片段

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

Muu • 3 个月前 • 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 回复

其他回帖
Matttttt • 3 个月前
订阅者付费者

感谢大佬 😋

Muu • 2 个月前

付费者

把整个标签改成行级块应该就就行了 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;  /* # 号距离文字的距离 */
}

效果图

1 回复

sweesalt • 2 个月前
订阅者作者

谢谢，可以了
查看全部回帖

sweesalt

天津

回帖

243

帖子

积分

3292

近期热议

推荐标签标签

TGIF

Thank God It's Friday! 感谢老天，总算到星期五啦！
288 引用 • 4485 回帖 • 663 关注
AngularJS

AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。
12 引用 • 50 回帖 • 483 关注
Ant-Design

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

禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。
5 引用 • 15 回帖 • 101 关注
Oracle

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

区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法。
91 引用 • 751 回帖 • 1 关注
服务器

服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。
125 引用 • 588 回帖
Ngui

Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。
7 引用 • 9 回帖 • 394 关注
VirtualBox

VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。
10 引用 • 2 回帖
Bug

Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。
76 引用 • 1737 回帖 • 1 关注
SOHO

为成为自由职业者在家办公而努力吧！
7 引用 • 55 回帖 • 5 关注
30Seconds
📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。
- 精选常见面试题，帮助您准备下一次面试
- 精选常见交互，帮助您拥有简洁酷炫的站点
- 精选有用的 React 片段，帮助你获取最佳实践
- 精选常见代码集，帮助您提高打码效率
- 整理前端界的最新资讯，邀您一同探索新世界
488 引用 • 384 回帖
sts

2 引用 • 2 回帖 • 196 关注
SEO

发布对别人有帮助的原创内容是最好的 SEO 方式。
35 引用 • 200 回帖 • 27 关注
微软

微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。
8 引用 • 44 回帖
脑图

脑图又叫思维导图，是表达发散性思维的有效图形思维工具，它简单却又很有效，是一种实用性的思维工具。
30 引用 • 96 回帖 • 1 关注
黑曜石

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

A second brain, for you, forever.

16 引用 • 130 回帖
LaTeX

LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。
12 引用 • 54 回帖 • 49 关注
开源

Open Source, Open Mind, Open Sight, Open Future!
407 引用 • 3578 回帖 • 1 关注
Jenkins

Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件，让构建、部署、自动化集成项目变得简单易用。
53 引用 • 37 回帖 • 3 关注
新人

让我们欢迎这对新人。哦，不好意思说错了，让我们欢迎这位新人！
新手上路，请谨慎驾驶！
52 引用 • 228 回帖
Unity

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

1 引用 • 2 回帖 • 129 关注
Git

Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
209 引用 • 358 回帖
PHP

PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。
179 引用 • 407 回帖 • 491 关注
Chrome

Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
62 引用 • 289 回帖
七牛云

七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。
27 引用 • 225 回帖 • 162 关注

求标签样式 CSS 代码片段

相关帖子

思源安装问题

SQL 求教 - 在路径内、列表内随机索引单个任务项

点代码片段导致白屏

为什么一级标题，二级标题等没有了颜色？以前是红色，紫色，蓝色的

更新版本後之前修改的 css 失效了

在软件里提示检查和内核是否有误?

思源笔记里面这种分享到社区点错能否撤回？

标题标签

行级标签

欢迎来到这里！

标题标签

行级标签

效果图

近期热议

推荐标签标签

最新标签

求标签样式 CSS 代码片段

相关帖子

思源安装问题

SQL 求教 - 在路径内、列表内随机索引单个任务项

点代码片段导致白屏

为什么一级标题，二级标题等没有了颜色？以前是红色，紫色，蓝色的

更新版本後之前修改的 css 失效了

在软件里提示检查和内核是否有误?

思源笔记里面这种分享到社区点错能否撤回？

标题标签

行级标签

欢迎来到这里！

标题标签

行级标签

效果图

近期热议

推荐标签 标签

最新标签

推荐标签标签