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: "插入的文字";
}

注意,類名前面有一個點,不要忘了
你也可以修改插入文字的參數,自行到網上搜索。
更新完成後,刷新網頁,此時修改應該生效,否則前往第三步。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。