Перечеркнутый текст по диагонали

#html #css

Пробую трансформацией, но transform-origin приходится по пикселям подгонять, а если
будет строка длиннее или короче, то все опять съезжает (должно быть по серединке).

Вопрос: Какие есть оптимальные варианты для верстки перечеркнутого текста по диагонали
для строки разной длины?



.str {
  position: relative;
  display: inline-block;
}

.str:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: red;
  transform: rotate(-10deg);
}
Lorem ipsum.



    

Ответы

Ответ 1

Самый просто способ , работает со любой разумной длиной



p{
	white-space:pre;
	position:relative;
	display:inline-block;
	font-size:20px;
}
p:after{
	content:"";
	display:block;
	position:absolute;
	left:0;top:50%;
	color:red;
	width:100%;
	height:0;
	border-bottom:2px solid red;
	transform:rotate(-1deg);
}
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.


Praesent sapien massa,Praesent sapien massa,  convallis a pellentesque
nec, egestas non nisi.


Praesent sapien massa, convallis 



Ответ 2

Могу предложить вот такой хак. Создается тег с классом, который обозначает зачеркивание.
И в него скриптом добавляется svg зачеркивание. Тогда работает со строкой любой длины:

HTML:


SK tslk ser; k;stlk esl;kt sdasfasfasfasfwshgf srg ser se t



CSS

b{position:relative;}
svg{width:100%;position:absolute;height:100%;left:0;}


JS

$(".trow").append("");


Пример:

https://jsfiddle.net/v8vb6a8s/


Ответ 3

.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);
}


    
Deleted text