正確には、テキストを変更するのではなく、既存のテキストの前または後ろにテキストを追加することです。既存の HTML コードや JavaScript を直接変更できない場合に、ウェブページに追加のテキストコンテンツを追加したい場合に使用できます。例えば、xLog のようなウェブサイトです。
これは私が偶然見つけた方法であり、初心者のレベルで、CSS を学んでいないため、嫌なコメントはしないでください
100% 効果があるわけではありません
前提条件#
ウェブサイトはカスタム CSS をサポートする必要があります。
手順#
Stylebotプラグインをインストールします（オプションですが、デバッグに便利です）。
Stylebot の Github アドレス：https://github.com/ankit/stylebot- 変更するテキストの要素を見つけます。
100% 正確ではありません
ブラウザの開発者ツールを開きます。Chrome のショートカットキーはCtrl + Shift + Iです。
上記の画像のようなウィンドウが表示されるはずです（私は Firefox を使用しているため、異なる場合があります）。
Ctrl+Shift+Cを押し、マウスを変更したいテキストに移動し、対応するフレームに移動します。
ここでは、Ai 生成の摘要を例に説明します。
この時点で、開発者ツールウィンドウはフレームのノードを示しているはずです。
クラス名の大部分は、クラスの値の最初の部分です。例えば、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 コードを追加します（第 3 ステップでコピーした場合は、直接貼り付けることができます）。
テキストを後ろに挿入する場合は、次のようにします：
.クラス名:after {
content: "挿入するテキスト";
}
前に挿入する場合は、次のようにします：
.クラス名::before {
content: "挿入するテキスト";
}
注意：クラス名の前にはドットがありますので、忘れないでください。
挿入するテキストのパラメーターも変更できますが、インターネットで検索して自分で調べてください。
更新が完了したら、ウェブページをリロードします。この時点で変更が反映されるはずです。反映されない場合は、第 3 ステップに進んでください。