type
status
date
slug
summary
tags
category
icon
password
通过CSS修改文字
准确来说,不是修改文字,而是在已有的文字前面或后面添加文字。适合想在网页中添加一些额外的文字内容,但又无法直接修改已有的HTML代码或js的适合,比如像 xLog这样的网站。
这是本人无意间发现的方法,小白水平,没学过css,不喜勿喷不是100%有效
前提
网站必须支持自定义css
方法
1.安装
Stylebot
插件(可选,方便调试)
Stylebot的Github地址: https://github.com/ankit/stylebot
2.找到要修改的文字的元素
不是100%正确
打开浏览器的
开发者工具
,如chrome的快捷键是Ctrl + Shift +I

你应该看到类似上图的窗口弹出(本人使用firefox,所以会有不同)
按下
将鼠标移动到你要修改的文字上,然后移动到对应框架。
这里拿


举例
此时开发者工具窗口应该会指示出框架的节点
类名大部分应该是class值最前面那段,如
xlog-post-summary border rounded-xl mt-4 p-4 space-y-2
是xlog-post-summary
记下它
3.使用Stylebot
检查自定义CSS是否生效(可选,但强烈建议检查一下)
打开Stylebot
选择
代码

如果你要把文字插在后面,使用:
如果是前面,使用:
注意,类名前面有一个点,不要忘了
你也可以修改插入文字的参数,自行到网上搜索
此时对应元素应该发生变化了,如果没有,就是css写错了或无法修改。
测试完毕后可以把
代码
复制,然后清空Stylebot
的代码
4.应用CSS
在平台后台的自定义CSS处添加CSS代码(如果第三步有复制,可以直接粘贴)
如果你要把文字插在后面,使用:如果是前面,使用:
注意,类名前面有一个点,不要忘了
你也可以修改插入文字的参数,自行到网上搜索。
更新完成后,刷新网页,此时修改应该生效,否则前往第三步。
- 作者:Sakura Homura
- 链接:https://endercat.eu.org/article/352acb5d-185d-40b3-b4d8-1451876bbaff
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章