banner
endercat

endercat

某个白嫖怪的分享博客 现已迁移到 https://endercat.eu.org 请前往该URL查看最新文章
bilibili
github
telegram

通过CSS修改文字

准确来说,不是修改文字,而是在已有的文字前面或后面添加文字。适合想在网页中添加一些额外的文字内容,但又无法直接修改已有的 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-2xlog-post-summary
记下它
3. 使用Stylebot检查自定义 CSS 是否生效 (可选,但强烈建议检查一下)
打开Stylebot

图片

选择代码

图片

如果你要把文字插在后面,使用:

.类名:after {
  content: "插入的文字";
}

如果是前面,使用:

.类名::before {
  content: "插入的文字";
}

注意,类名前面有一个点,不要忘了
你也可以修改插入文字的参数,自行到网上搜索

此时对应元素应该发生变化了,如果没有,就是 css 写错了或无法修改。
测试完毕后可以把代码复制,然后清空Stylebot的代码
4. 应用 CSS
在平台后台的自定义 CSS 处添加 CSS 代码 (如果第三步有复制,可以直接粘贴)
如果你要把文字插在后面,使用:

.类名:after {
  content: "插入的文字";
}

如果是前面,使用:

.类名::before {
  content: "插入的文字";
}

注意,类名前面有一个点,不要忘了
你也可以修改插入文字的参数,自行到网上搜索。
更新完成后,刷新网页,此时修改应该生效,否则前往第三步。

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。