To be precise, it is not modifying the text, but adding text before or after existing text. It is suitable for adding additional text content to a webpage without directly modifying existing HTML code or JavaScript, such as websites like xLog.
This is a method I accidentally discovered. I am a beginner and have not learned CSS. Please don't criticize me if you don't like it.
It is not 100% effective.
Prerequisites#
The website must support custom CSS.
Method#
- Install the
Stylebotplugin (optional, for easy debugging).
Stylebot's GitHub address: https://github.com/ankit/stylebot - Find the element containing the text to be modified.
Not 100% accurate
Open the browser'sDeveloper Tools, for example, the shortcut in Chrome isCtrl + Shift + I.
You should see a window similar to the one above (I am using Firefox, so it may look different).
Press Ctrl+Shift+C, move the mouse over the text you want to modify, and then move to the corresponding frame.
Using "Generated Summary by AI" as an example here:
At this point, the Developer Tools window should indicate the node of the frame.
The class name should mostly be the first part of the class value, such as xlog-post-summary border rounded-xl mt-4 p-4 space-y-2, which is xlog-post-summary.
Take note of it.
3. Use Stylebot to check if the custom CSS is effective (optional, but highly recommended).
Open Stylebot.
Select Code.
If you want to insert text after, use:
.class-name:after {
content: "Inserted text";
}
If it is before, use:
.class-name::before {
content: "Inserted text";
}
Note that there is a dot before the class name, don't forget it.
You can also modify the parameters of the inserted text, search online for more information.
At this point, the corresponding element should have changed. If not, it means the CSS is written incorrectly or cannot be modified.
After testing, you can copy the Code and then clear the code in Stylebot.
4. Apply CSS
Add the CSS code to the custom CSS section in the platform's backend (if you copied in step 3, you can directly paste it).
If you want to insert text after, use:
.class-name:after {
content: "Inserted text";
}
If it is before, use:
.class-name::before {
content: "Inserted text";
}
Note that there is a dot before the class name, don't forget it.
You can also modify the parameters of the inserted text, search online for more information.
After updating, refresh the webpage. The modification should take effect. If not, go back to step 3.