I actually DID see a topic like this before but I couldn't understand it that well since I'm a total noob, and well, my situation is different, anyhow
I've been doggedly researching on CSS and how exactly to make my story more 'aesthetically pleasing' (which I'm still working on -- I'm no artist and I'm being a one-man group pretty much).
I came across a Twine game and I was like "everything holy in this world, this is pretty!" And got a wave of inspiration from it. I wanted to look into the game itself to learn how exactly the creator of it made the choices look so cool (no plagiarism).
So I want to learn how I can put an image next to each and every link (exactly the same image) without having to go back into my story and remember I should copypasta an image in? I tried finding ways how to do it with stylesheet, but I'm inexperienced in that field and hope to learn (and, anyway, I gave up midway but even then images for me apparently take up a whole line even with a measly 24 x 19 pixel picture if I copypasta it ¯\_(ツ)_/¯).
This might be a
really easy question and maybe this topic already surfaced (I tried looking if there was a discussion about this, maybe I
just didn't search hard enough or looked correctly...), but if you could help me out that'd be great!
Still
using SugarCube 1.0 since I'm not about that life.
_^ I'm talking about that arrow appearing to each and every choice in that one game, but I'm not thinking of an arrow specifically.
TL;DR
Sugarcube 1.0.34
Same image/icon next to links/choices w/o copy/pasting <img src="">
(Refer to image above)
Comments
You can add image before all links with:
tw-link::before {content:url("icon.png");}
This makes locating and reading the examples easier, I must admit I missed the actual CSS in your comment the first time I quickly scanned it. *smile*
What does that even mean?
It's been a while since I did anything with SugarCube v1—you seriously should not be using it at this point—however, try the following: For SugarCube v2 users, the following is equivalent: Depending on the image in question, you may want to add a no-break space between the image and the text of the link, which you may do by changing the content property of the previous examples like so: