Conditional HTML text

I'm trying to create a custom traffic light object that shows text based on whether status is Red, Yellow or Green, but i'm not sure where exactly i'd insert my html text. do i insert a whole new class for the htmbefore values?

Red: <p><span style="color: rgb(226, 80, 65); font-size: 60px;">Urgent Alert</span></p>
Yellow: <p><span style="color: rgb(247, 218, 100); font-size: 60px;">Warning</span></p>
Green: <p><span style="color: rgb(97, 189, 109); font-size: 60px;">Nothing to see here. </span></p>

<!--Custom Map Objects: Custom Traffic light-->

<div class="map_object map_table map_icon_large" id="<@itemid>" objectid="<@objectid>" subid="<@subid>" style="overflow:hidden;<#mapobject type="coordinates" subid="<@subid>" mode="<@editmode>">">
  <#mapobject type="objectgrip" mode="<@editmode>">
  <#mapobject type="htmlbefore" subid="<@subid>">

  <#sensor type="colorclassofstate" id="<@objectid>" var="status">
  <#objectproperty type="nodename" id="<@objectid>" var="nodename">
  <#if value="@nodename" is="sensor" then="sensr" else="hasred" varexpand="value" var="containsred" htmlbefore="test">
  <#if value="@nodename" is="sensor" then="sensy" else="hasyellow hasnored" varexpand="value" var="containsyellow">
  <#if value="@nodename" is="sensor" then="sensg" else="hasgreen hasnoyellow hasnored" varexpand="value" var="containsgreen">
  <svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.0"
  width="100%"
  height="100%"

  viewBox="0 0 100 280">
    <defs>
      <rect class="trafficlight_frame" x="0" y="0" width="100px" height="280px" fill="#ECECEC" id="a" />
    </defs>
    <use xlink:href="#a" />
    <g class="trafficlight" transform="translate(0,0)">
      <use xlink:href="#a" />
      <circle class="trafficlight_circle" r="40" fill="#DADADA" cx="50" cy="50" />
      <circle class="trafficlight_circle" r="40" fill="#DADADA" cx="50" cy="140" />
      <circle class="trafficlight_circle" r="40" fill="#DADADA" cx="50" cy="230" />
      <circle style="<#if value="@status" contains="@containsred" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#E6005F" cx="50" cy="50" />
      <circle style="<#if value="@status" contains="@containsyellow" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#F59C00" cx="50" cy="140" />
      <circle style="<#if value="@status" contains="@containsgreen" then="" else="opacity:0" varexpand="value,contains">" r="40" fill="#C0CC19" cx="50" cy="230" />
    </g>
  </svg>
  <div style="position:relative;margin-top:-20px">
    <#mapobject type="htmlafter" subid="<@subid>">
  </div>
</div>