Блог

Я не знаю, какое значение нужно ввести внутрь, поэтому мне нужна строка отмены, которая изменяется в зависимости от длины.

Я попробовал свойство «text-decoration:line-through», но не смог из-за указанной формы отмены строки.

Вот три вопроса, которые у меня есть. Должен ли я использовать виртуальный селектор для создания вышеуказанной формы? Должен ли я использовать свойство position: absolute только по форме стрелки? Или есть какой-либо другой способ?

Я не могу использовать фреймворк, подобный jQuery, и могу использовать только JavaScript.

Вот рабочий пример:

 .price {
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
    margin-right: 30px;
}

.price::before {
    content: '';
    width: 100%;
    height: 6px;
    padding-right: 10px;
    top: 50%;
    left:0;
    position: absolute;
    border-top: 1px solid #888888;
    border-right: 1px solid #888888;
    transform: skew(-45deg);
}  

 <div class="price">$200</div>
<div class="price">$20000</div>
<div class="price">$2000000</div>
<div class="price">$200000000</div>
<div class="price">$20000000000</div>