title: How to set text-decoration: underline only for specific content
body: <p>I have a input tag and where I am getting input value like this.</p>
  
  <pre><code>input.value += " " + value + ";" ;
  </code></pre>
  
  <p>In my css I have <code>text-decoration: underline;</code> but here underline is coming in "space" and ";" both the place. Is there any way I can decorate only text part. </p>
  
  <p>My Code is like :</p>
  
  <pre><code>var div = document.getElementById(divID);
  
  var myTable = '&lt;input type="text" id="myInput"  list="myUL" onclick = "openingList()" onkeyup="openingList()" style="width:30%;" &gt;' +
      '&lt;div id="triggers"&gt;' + '&lt;img class="trigger" onclick ="deleteValue()" src="css/clearT.png" id="cross" /&gt;' + '&lt;img class="trigger" src="css/combo_arrow.png" onclick = "openingList()" id="arrow" /&gt;' + '&lt;/div&gt;' +
      '&lt;ul id="myUL" hidden=true&gt;' + '&lt;li&gt;' + '&lt;a href="#" &gt;&lt;/a&gt;' + '&lt;/li&gt;' + '&lt;/ul&gt;';
  
  div.innerHTML = myTable;
  
  function selectItem(input, value) {
      var newinput = input.value.split(';');
      newinput[newinput.length - 1] = "";
      input.value = newinput.join(";");
      input.value += " " + value + ";" + "";    
  }
  </code></pre>
  
  <blockquote>
    <p>Current it is coming like this. </p>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/c3SEM.png" alt="What I am getting"></p>
  
  <blockquote>
    <p>What exactly I want here</p>
  </blockquote>
  
  <p><img src="https://i.stack.imgur.com/fzzw3.png" alt="What I want"></p>