Пробую трансформацией, но 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);
}
Ответ
Самый просто способ , работает со любой разумной длиной
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
Комментариев нет:
Отправить комментарий