title: how to style xml tag attribute with css
body: <p>I'm trying to give style to a xml file that is displayed as a page, so far I could manage to give style to only the "start" attribute of the tag, but I need to style two more attributes: "end" and "n".</p>
  
  <p>Currently I have:</p>
  
  <p><strong>css</strong>:</p>
  
  <pre><code>#mtxt tok { font-size: 14pt; }
  #mtxt u { display: block; text-decoration: none; margin-bottom: 10px; }
  #mtxt u:before { content: attr(start); color: #999900; padding-right: 30px; font-size: 9pt; }
  #mtxt l { display: block; }
  </code></pre>
  
  <p><strong>xml</strong>:</p>
  
  <pre><code>&lt;u n="1" start="00:00:23,912" end="00:00:26,540" id="u-1"&gt;
  &lt;tok id="w-1"&gt;Now we're reading from the letter of st. Paul&lt;/tok&gt;
  &lt;/u&gt;
  </code></pre>
  
  <p><strong>visualization</strong>: (kind of, for you to see more or less the result)</p>
  
  <p><i>00:00:23,912</i> : <strong>Now we're reading from the letter of st. Paul</strong></p>
  
  <p><strong>The visualization I'm trying to get is next one:</strong></p>
  
  <p><strong>1)</strong> <i>00:00:23,912 - 00:00:26,540</i> : <strong>Now we're reading from the letter of st. Paul</strong></p>
  
  <p>Any Suggestions... thanks</p>