Как сделать перечеркивание (::after) под одинаковым углом относительно текста горизонтальных блоков разной длинны?

Question

[Сидр Черенков]

Здравствуйте. Собственно вопрос в заголовке.

https://jsfiddle.net/x9qv0ht6/

По ссылке выше можно увидеть что линия перечеркивания "Длинное слово" и "Слово" - имеют разный угол. Как-бы сделать универсальное решение для любой длинны блока?

Comments

[Ankhena]

На CSS, без JS, фоновым градиентом https://jsfiddle.net/tp79fL0u/
Не идеально, нужно подбирать значения, чтобы сгладить линию, но суть такая.

Answer 1

[Aleksey Solovyev]

У Вас угол задан разный

transform: rotate(-45deg);

transform: rotate(-15deg);

Если Вам надо, чтобы линия шла из противоположных углов прямоугольника, то представьте его как 2 треугольника. Вам надо найти угол между гипотенузой и катетом. Формула: tan(A)=a/b , где а и b стороны прямоугольника. После задаете rotate через js

update
Без JS. Используйте абсолютное svg с preserveAspectRatio="none"
https://jsfiddle.net/21c74q38/

Comments

[Сидр Черенков]

1. Угол разный задан для числовых и текстовых полей. В текстовых полях угол задан одинаковый.
2. Решение нужно именно CSS, при помощи js задача-то пустяк.

[Aleksey Solovyev]

Сидр Черенков, обновил свой ответ.
Используйте svg: https://jsfiddle.net/21c74q38/

[Сидр Черенков]

Aleksey Solovyev, Не css решение конечно, но отлично подходит и проблему решает! Спасибо! :)