Cross out text CSS

Question

I need to cross out this text, as shown in the image, for a website. Does anyone know how this can be done ?

Create two pseudo elements `::before` and `::after`. Make these `content: ""; display: block; height: 1px; background-color: yourcolor; transform: rotate(xdeg)` each the angle needed. An alternative would be two apply two linear gradients as background-images which would probably work better since I assum you don't know the exact length of that number (and thus you cannot use a fixed degree to rotate). — connexo, Oct 17 '16 at 08:48

Nenad Vracar · Answer 1 · 2016-10-17T08:55:29.080

3

You can use :before and :after pseudo elements to create lines and transform: rotate()

div {
  font-size: 35px;
  color: #aaa;
  position: relative;
  display: inline-block;
}
sup {
  font-size: 20px;
}
div:after,
div:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: black;
}
div:before {
  transform: rotate(20deg);
}
div:after {
  transform: rotate(-20deg);
}

<div>$345<sup>.87</sup>
</div>

edited Oct 17 '16 at 08:55

answered Oct 17 '16 at 08:49

Nenad Vracar

118,580
15
151
176

I thought of this approach first, too. But sadly this fails to work for numbers of any length. – connexo Oct 17 '16 at 08:53
Can this be achieved in email. I know position won't work. iIs there any other way to do it using standard css. Thanks in iadvance. – astrosixer Jul 07 '22 at 17:11

score 0 · Answer 2 · answered Oct 17 '16 at 08:49

You can achieve this result by using ::before and ::after transformation properties:

<p class="dotd">deal of the day: </p>
<h1 class="cross">$341,95</h1>

.dotd {
     color: red;
}
.cross {
    position: relative;
    display: inline-block;
}
.cross::before, .cross::after {
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
}
.cross::before {
    border-bottom: 2px solid red;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
}
.cross::after {
    border-bottom: 2px solid red;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
}

js fiddle: https://jsfiddle.net/shx3n4ho/1/

score 0 · Answer 3 · answered Oct 17 '16 at 08:49

Check this

p{
  font-size:25px;
  display:block
}
.cross {
    position: relative;
    display: inline-block;
}
.cross::before, .cross::after {
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
}
.cross::before {
    border-bottom: 2px solid gray;
    -webkit-transform: skewY(-10deg);
    transform: skewY(-10deg);
}
.cross::after {
    border-bottom: 2px solid gray;
    -webkit-transform: skewY(10deg);
    transform: skewY(10deg);
}

<p>
Deal of the day
<span class="cross">365</span>
</p>

Cross out text CSS

3 Answers3