How to make line through not affect the whole text in a list

Question

I have this code in react which have inline style of line-through on textDecoration when completed is true:

<li
    onClick = {onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none',
    }}
  >
    {text} 
      <span>
       <a 
         style={{ textDecoration: 'none', color: 'red' }} 
         onClick={onTrashClick} 
         href="#"
       >
         X
       </a>
      </span>
  </li>

I tried to override the style in li in my a href and enclose it on span but I have no success, I also tried to put the style on span but no success, I want the line through not affect the X text in my href. Help?

Answer 1

Create a span to put your text into and apply the style to that rather than the entire li:

   <li onClick = {onClick}>
       <span 
         style={{
           textDecoration: completed ? 'line-through' : 'none',
         }}
       >
         {text} 
       </span>
       <a 
         style={{ color: 'red' }} 
         onClick={onTrashClick} 
         href="#"
       >
         X
       </a>
  </li>