准确来说,不是修改文字,而是在已有的文字前面或后面添加文字。适合想在网页中添加一些额外的文字内容,但又无法直接修改已有的 HTML 代码或 js 的适合,比如像 xLog 这样的网站。
这是本人无意间发现的方法,小白水平,没学过 css,不喜勿喷
不是 100% 有效
前提
网站必须支持自定义 css
方法
1. 安装Stylebot
插件 (可选,方便调试)
Stylebot 的 Github 地址: https://github.com/ankit/stylebot
2. 找到要修改的文字的元素
不是 100% 正确
打开浏览器的开发者工具
,如 chrome 的快捷键是Ctrl + Shift +I
你应该看到类似上图的窗口弹出 (本人使用 firefox, 所以会有不同)
按下Ctrl+shift+C
,将鼠标移动到你要修改的文字上,然后移动到对应框架。
这里拿Ai 生成的摘要
举例
此时开发者工具
窗口应该会指示出框架的节点
类名大部分应该是 class 值最前面那段,如xlog-post-summary border rounded-xl mt-4 p-4 space-y-2
是xlog-post-summary
记下它
3. 使用Stylebot
检查自定义 CSS 是否生效 (可选,但强烈建议检查一下)
打开Stylebot
选择代码
如果你要把文字插在后面,使用:
.类名:after {
content: "插入的文字";
}
如果是前面,使用:
.类名::before {
content: "插入的文字";
}
注意,类名前面有一个点,不要忘了
你也可以修改插入文字的参数,自行到网上搜索
此时对应元素应该发生变化了,如果没有,就是 css 写错了或无法修改。
测试完毕后可以把代码
复制,然后清空Stylebot
的代码
4. 应用 CSS
在平台后台的自定义 CSS 处添加 CSS 代码 (如果第三步有复制,可以直接粘贴)
如果你要把文字插在后面,使用:
.类名:after {
content: "插入的文字";
}
如果是前面,使用:
.类名::before {
content: "插入的文字";
}
注意,类名前面有一个点,不要忘了
你也可以修改插入文字的参数,自行到网上搜索。
更新完成后,刷新网页,此时修改应该生效,否则前往第三步。