How to apply class to individual result

Questions
1

I have the code below which lists pages. Next to pages that have had attributes in a check box list checked there are letters listed. i.e. if the check the V and S check boxes the result will be V, S

I want to apply a border/box style around each individual letter but right now when I put the span class=“extras” in it puts the border around all the results i.e. “V,S” instead of just the “V” then a “,” Then the “S”

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
	version="1.0" 
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
	xmlns:msxml="urn:schemas-microsoft-com:xslt" 
	xmlns:umbraco.library="urn:umbraco.library" xmlns:Examine="urn:Examine" 
	exclude-result-prefixes="msxml umbraco.library Examine ">

<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>

<!-- Input the documenttype you want here -->
<xsl:variable name="level" select="2"/>
		<xsl:variable name="startNode" select="$currentPage/ancestor-or-self::*[@level = $level]" />
<xsl:variable name="nodesToShow" select="$startNode/*[@isDoc][not(umbracoNaviHide = 1)]" />

<xsl:template match="/">

<!-- The fun starts here -->
<xsl:if test="$nodesToShow">
    <img src="/media/1133/actheader2.png" alt="Activities in this Section" class="acttitle" />
</xsl:if>
	<ul>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
	<li>
		<a href="{umbraco.library:NiceUrl(@id)}">
			<xsl:value-of select="@nodeName"/>
		</a>
		<span class="extras"><xsl:value-of select="activityextras"/></span>

	</li>
</xsl:for-each>
</ul>

</xsl:template>

</xsl:stylesheet>
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/57124-how-to-apply-class-to-individual-result