Skośne przekreśnielenie teksu

Question

Czy przekreślenie tekstu w taki sposób jest możliwe w czystym CSS ?

Answer 1

<span class="txt">I Guess Yes</span>

.txt {
  position: relative;
}
.txt: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);
}

Możesz zmienić położenie krechy na odwrotną, zmieniając rotację na dodatnią !

Pozdrawiam

Comments

Na marginesie: dla lepszej semantyki użyłbym tutaj <del> lub <s> zamiast <span> - żeby ten wizualnie przekreślony element reprezentował treść, która już nie jest istotna.

---

thx

Answer 2

<span class="strike-one">&pound;30</span><span>strike-one: border</span>
<br>
<span class="strike-two">&pound;30</span><span>strike-two: background</span>
<br>
<span class="strike-three"><hr>&pound;30</span><span>strike-three: &lsaquo;hr&rsaquo; tag</span>

span {
  position: relative;
  font: 2em monospace;
  color: silver;
  margin-left: 1em;
}


/* strike-one */
span.strike-one:before {
  position: absolute;
  content: "";
  left: 15%;
  top: 45%;
  right: 0;
  padding: 1.1em;
  border-top: 3px solid gray;
  transform: rotate(-25deg);
}

/* strike-two */
span.strike-two:after {
  position: absolute;
  content: "";
  left: -10%;
  top: 45%;
  width: 130%;
  height: 3px;
  background: gray;
  transform: rotate(-23deg);
}

/* strike-three */
span.strike-three hr {
   position: absolute;
   width: 60px;
   top: 0px;
   left: -5px;
   height: 3px;
   background-color: grey;
   border: 0;
   transform: rotate(-25deg);
}

[ HTML Punctuation Symbols ]

Answer 3

Na stack overflow jest wątek na ten temat: https://stackoverflow.com/questions/14593415/how-to-strike-through-obliquely-with-css

Nie wiem czy teraz są lepsze metody, ale warto poczytać. Spoko wydaje się użycie pseudo elementu ::before.