如何在文本中滑動並將其他文本向右推（CSS）

Question

我試圖使>從側面移入並將「Lorem」推向右側。我試圖在我的CSS內製作。

Answer 1

您可以使用僞元素和transition: max-width

* { 
 
    line-height: 1; 
 
} 
 
span:before { 
 
    max-width: 0; 
 
    overflow: hidden; 
 
    transition: max-width .5s; 
 
    content: '>'; 
 
    display: inline-block; 
 
} 
 
span:hover:before { 
 
    max-width: 2em; 
 
} 
 
span { 
 
    display: flex; 
 
    align-items: center; 
 
}

<span>Lorem</span>

Answer 2

嘗試類似： HTML代碼：

<p id ="lo"> > Lorem </p> 
<span id="ipsum"> Ipsum </span> 

CSS：

#lo { 
margin-left : 10px; 
}