Using CSS to create a strikethrough effect on prices with spacing

I have a woocommerce setup and I want to showcase the original prices by striking them out like a price tag when products are on sale.

However, there seems to be an issue with the space that woocommerce automatically adds between the currency and the price amount, which unfortunately cannot be altered. When I try using 

.amount{ text-decoration: line-through;}
, the strike only goes through the text and not the space in between. I want a single line crossing everything.

This is how it currently appears:

https://i.sstatic.net/C13xn.png

This is the desired look:

https://i.sstatic.net/tNLvD.png

I attempted a solution using border-bottom: 1px solid;, but the challenge lies in not being able to apply negative padding...

Any suggestions on how to address this css problem? It may seem minor, but despite extensive research, I haven't been able to find a fix.

Edit:

Here's the HTML/CSS code I am working with:

HTML

<p class="deals-value"><span><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">CHF</span>157.00</span></span></p>

CSS

.deals-value .amount {text-decoration: line-through;}
.woocommerce-Price-currencySymbol {margin-right: 10px;}

You can view the full html/css source and website here:

csswoocommercetext-decorationsstrikethrough

Answer №1

To enhance your design, consider utilizing the :after pseudo-element, strategically placed above the text using absolute positioning, as illustrated below:

.total{ 
  position: relative;
}
.total::after{
  content: "";
  width: 100%;
  height: 1px;
  background: black;
  position: absolute;
  bottom: -10px;
  left: 0;
}

If you provide access to your HTML/CSS code, I can offer more precise recommendations for styling. Nonetheless, this code snippet should set you on the right path.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing image alignment in flexbox containers with nested rows and columns

In the following design demonstration, there are three blocks to explore. Block 1: Consists of three columns. The middle column contains two rows, both set to flex:1. Block 2: Also has three columns. The middle column includes two rows, but with a unique ...

htmlcssflexbox

Setting a CSS grid column to have a minimum width of `max-content` and a specific

I am trying to create a CSS grid where the column widths adjust based on the content, but with a minimum width of 100px. I attempted using minmax(max-content, 100px), however it did not produce the desired result. In the example below, the narrow column sh ...

htmlcsscss-gridmin

Shimmering effect on hover for CSS animation

Is there a way to create a CSS-only animation that fades in and out until hovered when displayed in full? I can achieve both effects separately, but I'm struggling to make them work together. The hover element doesn't seem to be functioning prope ...

cssanimationhovercss-animations

what is the best way to change background image in media query for various screen sizes?

I have a customized email template with a background image. The size of the image is 600px (width), and I have applied a class called back-img for styling purposes. I am looking to override this class specifically for all mobile screen sizes, including lan ...

htmlcssresponsive-designmedia-queries

The height of the Material UI dropdown is displaying in an improper manner

I'm currently experimenting with the Material UI dropdown on my website, utilizing the react-select library. However, I've encountered an issue where the UI gets compromised when using an option that exceeds the width of the dropdown. If anybody ...

cssreactjsuser-interfacematerial-uireact-select

Is it possible to utilize AngularJS ngAnimate to perform cross-fading transitions on list items?

I am currently exploring the ins and outs of angularJS with my simple message ticker example. This ticker displays messages by toggling the CSS display property of one of the li elements. <div id="ngtickerMessage" class="ngtickerMessage"> ...

cssangularjshtml-listsng-animate

Embedding a CSS file into a PHP class

I've encountered a little issue that I can't seem to solve on my own. I've put together a "webengine" using multiple classes. The primary class responsible for obtaining a theme's internals is called "Logic". This Logic class contain ...

phphtmlcss

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

The movement of the Bootstrap navbar brand causes a shift in adjacent elements

Is there a way to use the bootstrap navbar brand without it affecting the layout of other elements? I'd like to have the icon aligned to the left and the navbar elements perfectly centered. Alternatively, is there a way to include the element as a n ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to incorporate various styles into one :style attribute?

Within my vuetify project, I encountered a challenge of adding multiple styles to the same style attribute. Specifically, I have successfully implemented a vuetify breakpoint and now wish to include {backgroundColor:'Color'} within the existing a ...

javascriptcssvue.jsvuetify.js

Assignment of Microsoft Avatar Colors

What method does Microsoft utilize to assign colors to contacts in their applications? I've searched online with no luck in finding an answer. In programs like Outlook or Android, when a new contact is added without an image for the avatar, Microsof ...

androidhtmlcssoutlookangular-material

When using percentages in HTML, the height and width of a background picture may not scale correctly

Currently, I am utilizing Webstorm software purely for HTML and CSS without any additional plugins. In my code, there is a <section> element that only has the <html> and tags as its parent elements. This particular section is assigned an ID th ...

htmlcss

Struggle with Arranging Elements in CSS using position absolute & relative

Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and cl ...

htmlcssiconscss-positionfont-awesome

Achieve a seamless integration of a navbar and list on the same line by utilizing the power of Bootstrap

No matter how much I tried, I couldn't solve the problem of my list not appearing in the same line. I attempted using display: inline-block; and padding: 0, but to no avail. /* added by editor for demonstration purpose */ body { background-color: ...

htmlcssbootstrap-5

JavaScript form with radio buttons

I'm completely new to JavaScript and I'm attempting to create a basic script that will show one form when a radio button is checked, and another form when the second radio button is clicked (with no form displayed when neither is selected). I kno ...

javascripthtmlcss

"Aligning two images side by side in a horizontal

[enter image description here][1]I am trying to place two images on my website, but I am struggling to vertically align them properly. I have attempted using line-height and vertical alignment, however, I cannot seem to pinpoint the issue or identify any m ...

htmlcss

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

jqueryhtmlcss

Angular 8 is facing an issue where classes defined dynamically in the 'host' property of a directive are not being properly applied to the parent template

In my Angular 8 application, I am working on implementing sorting using the ng-bootstrap table. I referred to the example available at . In the sample, when I hover over the table header, it changes to a hand pointer with a highlighted class applied as sho ...

cssangulartwitter-bootstrapng-bootstrap

Ensuring that images are the perfect size for their parent container

Exploring the functionalities of angular bootstrap carousel, I am eager to showcase various images and enable clicking on them. The challenge I'm facing is that my images are not uniform in size and don't fit perfectly within my bootstrap column ...

htmlcssimage

Trouble with z-index functionality in jQuery datatable

I'm struggling to get the Action Box displayed as an upper layer. I've already tried using z-index but it doesn't seem to make any difference. https://i.stack.imgur.com/rJ1vL.png $(document).ready(function () { ...

htmlcss