The <<actions>> macro automatically wraps the links it creates within a HTML <ul> (unordered list) element structure.
eg. the following <<actions>> macro call…
<<actions "Look at the pie" "Smell the pie" "Taste the pie">>
… generates the following HTML elements…
<ul class="actions">
<li>
<a data-passage="Look at the pie" class="link-broken macro-actions" tabindex="0">Look at the pie</a>
</li>
<li>
<a data-passage="Smell the pie" class="link-broken macro-actions" tabindex="0">Smell the pie</a>
</li>
<li>
<a data-passage="Taste the pie" class="link-broken macro-actions" tabindex="0">Taste the pie</a>
</li>
</ul>
The dot displayed before each of the list’s items is caused by your web-browser’s default <ul> element CSS rule containing a list-style-type: disc; setting.
You can suppress that dot appearing within your passage content by adding a CSS rule like the following to your project’s Story Stylesheet area.
.passage ul {
list-style-type: none;
}
I noticed in your second image that you’re adding Markup based links without Link Text to your Passage content…
[[->Target Passage Name]]
…if you are doing that so the Twine 2 application will display an arrow connection the current passage to the target passage within the Story Map when you’re using the <<actions>> macro to generate the actual link then that isn’t a good way to achieve that result.
A better way to achieve that result is to place the original unused link within a C-Style block comment like so.
<<actions "Look at the pie" "Smell the pie" "Taste the pie">>
/*
[[Look at the pie->Target Passage A]]
[[Smell the pie->Target Passage B]]
[[Taste the pie->Target Passage C]]
*/
This fools the Twine 2 application into creating any missing passages and to show connections arrows for those commented out markup links, because currently that application doesn’t understand what a comment is.