Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Uhh ThisQuestionProbablySurfacedAlreadyAndIMightBeAnIdiotBut. (A Question About Links & Images)

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.

Sugarcube 1.0.34
Same image/icon next to links/choices w/o copy/pasting <img src="">
(Refer to image above)


  • In CSS you can change link style with tw-link selector.
    You can add image before all links with:
    tw-link::before {content:url("icon.png");}
  • @Kosmo: Please use the code tag when posting examples - it's the C on the editor bar.

    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*
  • @Kosmo Your CSS is for Harlowe (only). The OP is using SugarCube v1.

    ChocoChoco wrote: »
    Still using SugarCube 1.0 since I'm not about that life.
    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:
    #passages a::before {
    	content: url("icon.png");
    For SugarCube v2 users, the following is equivalent:
    #story a::before {
    	content: url("icon.png");
    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:
    	content: url("icon.png") "\00a0";
Sign In or Register to comment.