Styling individual links in Sugarcube?

SpatkplusTwelve

So, I've been using the :before pseudo-class to add a little arrow icon to all the links in my story. I have no idea why I did that, but it looks nice and I even got it to change colors when you hover over it. I am putting a battle system in my story, and I made some buttons for each command and want to attach them to the links the same way I did with the arrow icon. This would require me to have several link styles in the same passage, and I have no idea how to do that. I thought that maybe I could use <div> tags to select the link, but doing that only adds a big button next to my little arrow, and the button is not part of the link. I tried then using the :link pseudo-class, but that caused the picture to not show up, and it messed up the spacing of my lines for some reason. I've also tried using <nav> and <span> tags to select the thing, but that did the same thing as the div tags.

The code I'm using for it right now until I learn how I'm actually supposed to do it is:

:Kris' Turn
<div id="attack">[[Attack|KrisAttack]]</div><br>

:Stylesheet
#attack:before {
content: [img[Attack Button]];
}


I feel like there's something stupidly simple about how to do this that I've been missing.

TheMadExile

Your selector is applying the style properties to the container, not the link inside the container.  Try this instead:


#attack a:before {
content: [img[Attack Button]];
}


Additionally, for the container, you may wish to switch from a <div>, which is a block level element, to <span>, which is an inline element (same as the link element, <a>).

SpatkplusTwelve

Wow. I was missing something stupidly simple. I didn't know think of writing it like that. Thank you!