title: CSS Strikethrough price with space
body: <p>I am using woocommerce and want to display the original prices as a price tag with a strikethrough (when products are on sale). </p>
  
  <p>The problem is now that woocommerce adds a space between the currency and the price amount, which I cannot change. When I use <code>.amount{ text-decoration: line-through;}</code> the line goes only through the text but not through the space between them. I want to display one line through everything. </p>
  
  <p>This is what it looks like: </p>
  
  <p><a href="https://i.stack.imgur.com/C13xn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C13xn.png" alt="enter image description here"></a></p>
  
  <p>This is what it should look like: </p>
  
  <p><a href="https://i.stack.imgur.com/tNLvD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tNLvD.png" alt="enter image description here"></a></p>
  
  <p>I tried this using <code>border-bottom: 1px solid;</code> but the problem is that it's not possible to add some kind of negative padding... </p>
  
  <p>Anyone got an idea how to solve this css issue? Actually it's a really small problem but I was not able to find a solution after a long time of research. </p>
  
  <p><em>Edit</em>: </p>
  
  <p>This is the HTML/CSS sourcecode which I am using:</p>
  
  <p><strong>HTML</strong></p>
  
  <p><code>&lt;p class="deals-value"&gt;&lt;span&gt;&lt;span class="woocommerce-Price-amount amount"&gt;&lt;span class="woocommerce-Price-currencySymbol"&gt;CHF&lt;/span&gt;157.00&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;</code></p>
  
  <p><strong>CSS</strong></p>
  
  <p><code>.deals-value .amount {text-decoration: line-through;}
  .woocommerce-Price-currencySymbol {margin-right: 10px;}</code></p>
  
  <p>Please find the full html/css source and website here: <a href="https://prnt.sc/hmfatr" rel="nofollow noreferrer">https://prnt.sc/hmfatr</a></p>