I need to cross out this text, as shown in the image, for a website. Does anyone know how this can be done ?
Asked
Active
Viewed 2,202 times
2
-
you can use an overlay with transparent background image. – Sven van den Boogaart Oct 17 '16 at 08:46
-
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
3 Answers
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>
Nenad Vracar
- 102,378
- 14
- 116
- 136
-
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
0
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/
Grey
- 829
- 8
- 26
0
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>
Prasath V
- 1,184
- 3
- 16
- 33