テキストでスライドして別のテキストを右に押す方法（CSS）

-1

>を横から動かし、「Lorem」を右に押してみようとしています。私は私のCSSの中でそれをしようとしています。 HTMLのCODE：テキストでスライドして別のテキストを右に押す方法（CSS）

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

CSS：

#lo { 
margin-left : 10px; 
}

出典

2017-06-07 haoyin

何か試しましたか？ –

ようこそ。 [ツアー]をご覧ください。また、[What topics about about]（http://stackoverflow.com/help/on-topic）、[ask]、[mcve]の作成方法を確認することもできます。試したコードと受け取ったエラーを投稿してください。できるだけ具体的にすることで、より良い回答につながります。 – happymacarts

あなたは擬似要素と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>

を使用することができます

images

出典

2017-06-07 15:50:52

のような何かを試してみてください

出典

2017-06-07 15:48:13

テキストでスライドして別のテキストを右に押す方法（CSS）

答えて

関連する問題