我正在嘗試使用 CSS 為文本上的一條線設定影片，但是當我單擊復選框時，它就像一個待辦事項串列，當您選中該框時，它將使一條線通過，但我希望通過線從左側開始對了，任何人都可以建議我嘗試的方法是否真的可行？如果沒有，是否有另一種方法可以實作這一目標？HTML：
<% DoList.forEach(function(elem) { %>
<div class = "item">
<input type="checkbox">
<p class = items> <%=elem %></p>
</div>
<% }); %>
<form class = "item" action="/" method="post">
<input type="text" name ="toDo" placeholder="I want to..." autofocus required="required" autocomplete="off" >
<button type="submit" class="rotateimg180"> </button>
</form>uj5u.com熱心網友回復：
假設您要洗掉的文本是一行，您可以向 p 元素添加一個偽元素，該元素在檢查輸入時會增長。它可以有一個用線性漸變創建的水平直線的背景影像。
p {
position: relative;
display: inline-block;
}
input p::before {
content: '';
position: absolute;
background-image: linear-gradient(transparent 0 48%, black 50% calc(50% 2px), transparent calc(50% 2px) 100%);
width: 0;
height: 100%;
transition: width 2s linear;
display: inline-block;
}
input:checked p::before {
width: 100%;
}<input type="checkbox">
<p>text here</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/348955.html
下一篇：根據React中的url切換類