When it comes to the line-through property in CSS, the default weight of 1px is ideal for body copy set at 1em.
However, for larger items like a price set at 3em on an offer site, 1px can feel too light. Is there a way to increase the line weight for line-through?
If not, what other options should I explore, like using an image overlay for instance?
If you’re using a modern browser, you have the ability to achieve a text strike-through effect with CSS like this:
.strike{
position: relative;
}
.strike::after{
content: '';
border-bottom: 4px solid red;
position: absolute;
left: 0;
top: 50%;
width: 100%;
}
I <span class="strike">love</span> hate hotdogs
For a live example, you can check out this fiddle I created: http://jsfiddle.net/TFSBF/
If you're looking for an alternative approach, you could try using a simulated strikethrough effect (which provides a visually appealing result and is compatible with all web browsers, although it requires loading a small image). The image used is a tiny black box measuring 1px by 2px.
strike {
background: url(/images/tiny-black-box.png) repeat-x 0 10px;
}
It appears there may be a discrepancy in how different browsers implement certain CSS properties.
To see an example of this issue, check out the following page: http://jsbin.com/arucu5/2/edit
In Internet Explorer 8 and Firefox, the width of the line-through effect increases with the font size. However, in Safari and Chrome, it remains at 1px.
If you encounter this problem, you can consider using a workaround like the one described in this resource:
Here is a solution that should do the trick:
<style>
span.highlight {
font-weight:bold; /*adjust line weight as needed*/
color:blue;
text-decoration:underline;
}
span.highlight>span {
font-weight:normal;
color: black;
}
</style>
<span class="highlight"><span>$20.00</span></span>
Here's a different method I've discovered for adjusting the line weight of multiline text:
span {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAIAAADdv/LVAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAASSURBVHjaYvrPwMDEAMEAAQYACzEBBlU9CW8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
background-position: center;
}
Check out this example:
This method involves using a repeating image (1px width and npx height), and it works regardless of the font size.
The only downside is that the background appears under the text.
You have the ability to make the line thicker using a specific style.
Here is an illustration:
border-width: 5px;
Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...
I have been exploring various code examples and techniques to transmit data from my website to the server's database. After evaluating different options, I concluded that making an ajax call to send the data would be the most efficient method. Here i ...
I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggest ...
Having some trouble using Glyphicons with Bootstrap 3. I've noticed that a few of them aren't displaying properly. For instance, when trying to use these three glyphicons, the first one doesn't seem to show up correctly (appears as an empty ...
I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...
I am currently developing a web application and incorporating Bootstrap 4 for certain components such as forms and tables. Within the design, I have included buttons grouped together to display various actions. Below is an example code snippet: <li ...
I am working on a React project with TypeScript and using a Material UI library. I am trying to set a background image for a button, but when I use src or imageURL, it gives me a TypeScript error. The CSS style also does not show the picture. Here is my ...
I am looking to incorporate animation into my title div. Below is the HTML code I have so far: <div class="particles" id="tittle"> <!-- Displaying title from Firestore using JavaScript --> </div> Here is the CSS cod ...
Looking for a way to trigger the animation rules of the <animate /> tag using only HTML and CSS. Is there a new standard in HTML and CSS that allows something like input:checked ~ svg animate {enabled:true;} coming up in 2020? Or some other creative ...
In the HTML page, there will be a total of 6 tabs labeled A, B, C, D, E, and F along with 2 dropdowns. The expected behavior is as follows: The user will choose a value from the 2 dropdown menus. Based on the selected value, filtering should be applied to ...
As someone who is new to HTML/CSS, I recently developed my first website using the Cargo platform. Within a section on my site featuring various videos, I encountered difficulty in properly positioning the titles over them while ensuring they remain respo ...
I am currently facing an issue with my datatable where I need it to have a specific width while also displaying all its columns. The problem I am encountering can be summarized as follows: I came across solutions like Datatables Width Overflow For A ...
Is it possible to parse a given link and find CSS selectors with attributes that partially or completely match a specific keyword? For example, if the keyword is "print," I want to identify all CSS selectors in the link containing "print" in their name, id ...
Recently updated my application to be mobile-friendly. I've noticed that at times, the keyboard seems to have a slight delay in appearing when I tap on an input field. I have around 20 inputs on a single page. I conducted a test with the same number ...
Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...
I have a table and I want to show the contents of another row inside the current row when the plus icon is clicked. I'm not sure which HTML element to use for this. Please help me figure it out. Thank you in advance. <div class="pro ...
I'm currently working with the fullPage.js plugin () and encountering some issues. While sliding through each section, everything functions as expected. However, when I reach the last section and try to scroll down to the footer below it, I encounter ...
How can I ensure that the image inside "fixedContainer" follows scrolling without going below the end of <div class="col-lg-8">, especially when the sidebar has a large amount of data and requires scrolling? <link href="htt ...
I need assistance centering the button within a Grid layout using Material-UI <Grid container style={{backgroundColor:'green'}} alignItems="center" justify="center" > <Grid alignItems="center" justify=&q ...
I'm currently developing an application using AngularJS/Javascript, HTML, and CSS within a cloud-based environment on c9.io. My next task is to create and test an app that can access the phone's photo album, apply filters to images, and I'm ...