类似下面图示这种样式的标签:在标签文字前面加“#”号,并添加底色和边框。
相关帖子
-
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; }
行级标签
.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; /* # 号距离文字的距离 */ }
- 其他回帖
-
标题标签
/* 标题 标签 */ .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 回复 -
把整个标签 改成行级块应该就就行了
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 回复 - 查看全部回帖