Страницы

Поиск по вопросам

вторник, 23 октября 2018 г.

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

Пробую трансформацией, но 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.


Ответ

Самый просто способ , работает со любой разумной длиной
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


Комментариев нет:

Отправить комментарий