Transparent Strikethrought on Text

transparent strikethrought on text

You may achieve the transparent strikethrought on text only with CSS with the use of line-height and overflow:hidden; properties.

Demo : CSS transparent strike through

Output :

---

Explanation :

1. Step 1 : hide the bottom of the <h1>text with
   height:0.52em; overflow:hidden; use em units so that the height adapts to the font size you are using for the <h1> tag
   fiddle
2. Step 2 : "rewrite" the content in a pseudo element to minimise markup and prevent content repetition. You may use a custom data attribute in order to keep all the content in the markup and don't have to edit the CSS for every title.
   fiddle
3. step 3 : align the pseudo element text to the top so only the bottom is shown with line-height:0;
   fiddle

---

Relevant code :

body{    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg);    background-size:cover;}h1{    font-family:arial;    position:relative;}h1 span, h1:after{    display:inline-block;    height:0.52em;    overflow:hidden;    font-size:5em;}
h1:after{    content: attr(data-content);       line-height:0;    position:absolute;    top:100%; left:0;}

<h1 data-content="EXAMPLE" ><span>EXAMPLE</span></h1>

CSS strikethrough different color from text?

Yes, by adding an extra wrapping element. Assign the desired line-through color to an outer element, then the desired text color to the inner element. For example:

<span style='color:red;text-decoration:line-through'>  <span style='color:black'>black with red strikethrough</span></span>

Strikethrough a tr excluding some text

As per documentation Its not possible ..

https://www.w3.org/TR/CSS21/text.html#lining-striking-props

Solution:

HTML

<tr>
    <td class="content" width="100%" align="left" >
        <span class="subheading">
            sub-Heading
        </span>
        <span class="status">
        Content
        </span>
    </td>
</tr>

CSS

.status {
text-decoration: line-through;
}

Yes it creates a messier code ..

How to add strike through on Text in react native?

With :

<Text style={{textDecorationLine: 'line-through', textDecorationStyle: 'solid'}}>
  Solid line-through
</Text>

Combining gradient text with strikethrough / line-through in Chrome

I was very surprised that the code in question worked with the -webkit- specific props and gradient syntax but just now learnt that Firefox had shipped compatibility with these -webkit- specific props.

A now-deleted answer seems to have come close to explaining why it doesn't work in Chrome but not close enough and since it is now deleted (I don't know why), I will add a more complete explanation.

---

Findings:

As per MDN, the -webkit-text-fill-color is defined as follows:

The -webkit-text-fill-color CSS property specifies the fill color of characters of text. If this property is not set, the value of the color property is used.

and as per the W3C Specs for text-decoration property the line through's color is specified as follows:

The color(s) required for the text decoration should be derived from the 'color' property value.

It seems like Chrome probably considers the text to be transparent and so applies transparent color to the line through also. Thus we don't get to see any line. But this is not correct because as per specs it should use the value belonging to the color property.

Chrome sets the color correctly (for the snippet in question the color is black but even changing it to another color doesn't work) but doesn't apply it correctly to the line through. For example, in the below snippet the color of the element is green (is inherited from body) and by inspecting the element with Dev console we can see that the color is set correctly but there is no line through.

body {  background: black;  color: green;}.gradienttext {  background: -webkit-linear-gradient(#fff, #999);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}.strike {  text-decoration: line-through;}

<p class="gradienttext">  The following dummy text should both be a long vertical gradient, and also be strikethrough, which works fine on firefox, but not chrome. <span class='strike'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>

How to strike through obliquely with css

There is a hacky way to do this, using the :before pseudo element. You give the :before a border, then rotate it with a CSS transform. Doing it this way adds no extra elements to the DOM, and adding/removing the strikethrough is a simple as adding/removing the class.

Here's a demo

Caveats

• This will only work down to IE8. IE7 does not support :before, however will degrade gracefully in browsers that do support :before but don't support CSS transforms.
• The angle of rotation is fixed. If the text is longer, the line will not touch the corners of the text. Be mindful of this.

CSS

.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  transform:rotate(-5deg);
}

HTML

<span class="strikethrough">Deleted text</span>

How can I achieve underneath diagonal strikethrough text in CSS?

yes, it is possible, but I don't recommend doing it that way

for the stroke: simply create an element and rotate it a bit

for the "underneath" look: use position: relative (absolute), margins, paddings etc.

here is live example: http://jsfiddle.net/78qpE/1/

Is it possible to animate a strikethrough? CSS / JS

If you are willing to accept using a straight line as the strike through (instead of depending on the font's own strikethrough styles), then it is just a matter of overlaying a div on top of the <h1> element and offsetting it 100% to the side using transform: translateX(-100%). We give it a top border whose width is font-size dependent (i.e. use em units), and a color whose value is dependent on the current font color (i.e. use currentColor).

You can use CSS transitions set the duration and easing function of the entry of this line. When the .strikethrough class is added, the offset is simply set to transform: translateX(0).

A caveat is that this trick only works for non-breaking lines. If your h1 element will render across multiple lines, then it wouldn’t work.

See proof-of-concept example below:

document.querySelector('h1').addEventListener('click', (e) => {
e.target.classList.toggle('strikethrough')
});

h1 {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

h1::after {
  position: absolute;
  top: calc(50% - 0.05em);
  left: 0;
  width: 100%;
  content: '';
  display: block;
  border-top: 0.1em solid currentColor;
  transform: translateX(-100%);
  transition: transform .25s ease-in-out;
}

h1.strikethrough::after {
  transform: translateX(0);
}

<h1>CROSS ME OUT</h1>

---

Related Topics