简约版本
简约版本会生效,但是样式效果不太好而已,比如鼠标划过文字不会变色,文字不居中而已。
/* 1. 强制隐藏原始文本 */
.code-toolbar .toolbar-item a {
color: transparent !important; /* 让原文字透明 */
position: relative;
display: inline-block;
}
/* 2. 注入“复制”文字 */
.code-toolbar .toolbar-item a::before {
content: "复制"; /* 默认显示的文字 */
color: #bbb; /* 这里的颜色可以根据你的主题调整 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 12px; /* 调整为你希望的大小 */
pointer-events: none; /* 确保点击能穿透到下层的 a 标签 */
}
/* 3. 当点击成功后(Prism 会自动切换状态),改变文字 */
.code-toolbar .toolbar-item a[data-copy-state="copy-success"]::before {
content: "已复制!";
color: #4caf50; /* 成功时显示绿色 */
}
终极修正样式版本
/* 精简版:只负责中文显示、居中和基础划过变色 */
.code-toolbar .toolbar-item a {
color: transparent !important;
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 50px; /* 宽度够放“复制”二字即可 */
text-decoration: none !important;
}
.code-toolbar .toolbar-item a::before {
content: "复制";
color: #999;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
white-space: nowrap;
transition: color 0.2s;
}
/* 划过变色,让用户知道这是个能点的按钮 */
.code-toolbar .toolbar-item a:hover::before {
color: #666 !important;
}
用CSS的“障眼法”(伪元素替换法),把css放到你自定义引用的css文件里面去就好了,文章页面css和头部引用的css都可以,主要是懒去源文件找这几个字修改…所以说你也可以直接修改源文件。
为什么我会放两个版本?因为每个人的博客都不太一样,根据每个人的博客修改的样式主题对应的,所以都放上去,万一有那个网友刚刚好对得上,可以用到…
→转载请注明出处←