CSSポジショニング：before：アニメーション後の段落の段落付け

Question

アニメーションのステップがありますが、各ステップの下にテキストを追加するときに大きな問題があります。
問題があること：前に、私は別のアプローチを試してみました

段落を追加する際、改行後：

• 絶対位置 - ULでそのすべてをラッピング応答状態
• のためによくありません - 私は "クラスを作成しているだけでなく
• インラインとインラインブロックの位置

を表示しませんステップ-段落」

 <ul class="steps"> 
     <li class="step step-incomplete step-active"> 
     <span class="step-icon"></span><span class="span-label">Step 1</span> 
     <p class="step-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </li> 
     <li class="step step-incomplete step-inactive"> 
     <span class=" step-icon"></span><span class="span-label">Pass the test</span></li> 
    <li class="step step-incomplete step-inactive"> 
     <span class=" step-icon"></span><span class="span-label">Start earning</span></li> 
    </ul> 

は、ここですべてのヘルプは非常に高く評価されcodepenhttp://codepen.io/felixyakubov91/pen/pNPoaW

です！

Answer 1

ANSWERはまた

.step-paragraph {text-align:left;margin:10px 5px; 
max-width:300px; display:inline-block;} 

一部を発見した：前に、：目標は何ですか