[英]How can I make width property start from right to left instead of left to right
我想要::before animation 當width: 100%; 當你 hover 它 animation go 從左到右（返回） width: 0; 有沒有辦法用 css 做到這一點？
span { display: inline-block; text-align: center; line-height: 40px; transition: ease-in-out 3s; } span::before, span::after{ content: " "; display: block; width: 100%; height: 5px; background-color: red; transition: ease-in-out 3s; } span::before { left: auto; bottom: auto; right: 0; top: 2px; transition: ease-in-out 3s; } span:hover::after, span:hover::before{ width: 0; transition: ease-in-out 3s; }.kotak:hover { width: 0%; }
<.DOCTYPE html> <html> <head> <title>Simple Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <Span>PLACEHOLDER</Span> </body> </html>
簡化您的邏輯，如下所示。 left切換控制right
span { display: inline-block; line-height: 40px; background: linear-gradient(red 0 0) top right, linear-gradient(red 0 0) bottom left; background-repeat:no-repeat; background-size:100% 5px; transition: ease-in-out 1s,background-position 0s 1s; /* or simply transition: ease-in-out 1s */ } span:hover{ background-size:0% 5px; background-position: /* remove this to keep the same position */ top left, bottom right }
<span>PLACEHOLDER</span>
經過一些測試，我終於找到了問題的答案，我在代碼片段中添加了注釋
/* Use Parent set to relative to contain absolute */.box { position: relative; display: inline-block; margin-bottom: 20px; line-height: 60px; } /* Set Position to Absolute so we can use top,right,bottom,left */.box::before, .box::after { content: ""; display: block; position: absolute; background-color: blue; width: 100%; height: 10px; bottom: 0; transition: 3s; } /* Set to right so the::before start from right side to the left */.box::before { top: 0; right: 0px; }.box:hover::after, .box:hover::before { width: 0; }
<.DOCTYPE html> <html> <head> <title>Simple Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box">PLACE HOLDERDERER</div> </body> </html>
如何從右到左過渡寬度而不是默認的從左到右？
[英]How do I transition width from right to left instead of default left to right?
當左列采用百分比寬度時，如何使右列采用固定寬度？
[英]How can I make the right column take fixed width when left column takes a percentage width?
如何在鏈接下方的左側而不是右側開始超級菜單
[英]How do I make a mega menu start on the left instead of right under the link
如何使進度條從右到左而不是從左到右轉換？
[英]How to make the progress bar transit from right-to-left instead of left-to-right?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.