Symbols before links

Authoring Twine
#1

I’m back with another idea I have problems implementing. I’m not exactly sure it’s doable but let’s try…

What I want to do is add a symbol before each link to a passage. So far I’m using a * before a link manually but as I think about it more I would like to add more symbols there. Is it possible to somehow make them appear automatically?

Let’s say I want it to look like this (please assume the ‘>’ symbol is a CSS right arrow :sweat_smile:):
‘>’[[Link to passage here.]]
‘>’[[Another link to passage here.]]

Anything I can add to the stelsheet (or anywhere, just assuming it would be there?) to let it know I want a specific symbol before each link?

I’m using:
Twine Version: 2.3.13
Story Format: Sugarcube 2.34.1

#2

HTML/CSS has a feature known as Pseudo-elements, that lets you style a specific part of the selected HTML element(s). One of these pseudo-elements is named ::before, which as shown in its examples, can be combined with the CSS content property to add ‘content’ before the selected element(s).

You can use your web-browser’s Web Developer Tools to Inspect the HTML generated by links like the following to determine which HTML element you need to target…

[[Option 1]]
[[Option 2]]

…the generated HTML would look something the following, notice how each has a CSS class named link-internal assigned to it…

<a data-passage="Option 1" class="link-internal" tabindex="0">Option 1</a>
<a data-passage="Option 2" class="link-internal" tabindex="0">Option 2</a>

So if you want all the links within the main Passage area of your page to have a small hart before them…

.passage .link-internal:before {
	content: "♥ ";
}
1 Like
#3

In addition to what Greyelf said, SugarCube has some built-in icons you can use. So you could add a right-arrow to your links like this:

.link-internal:before {
	content: "\e822\00a0";
	font-family: tme-fa-icons;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	width: 13px;
	margin: auto;
	padding-left: 2px;
	speak: none;
}

Enjoy! :slight_smile:

1 Like
#4

Thank you so much, both of you! :hugs: