title: Align right with indentation
body: <p>I have text which has to be right aligned, and when this text takes up more than one line and wraps around, that new line has to be distinguishable from the line after, so I'm trying to get it to indent on the right side, but I can't find a solution which works.</p>
  
  <p>I've tried what was suggested on [the htmlhelp forums thread #8327] and [codingforums thread #58451] as well as a combination of the two to no avail (Can't post links. Sorry.). Is there any other way of accomplishing this?</p>
  
  <p>My attempts:</p>
  
  <pre><code>div.poem li:after
  {
   content: " ";
   display: inline-block;
   width: 10px; 
  }
  </code></pre>
  
  <p>Does something, but I don't want it to indent if the text only takes up one line.</p>
  
  <pre><code>div.poem li::first-line::after
  {
   content: "asdf";
  }
  </code></pre>
  
  <p>Does nothing</p>
  
  <pre><code>div.poem li:first-line
  {
   color: red;
   margin-right: 200px;
   padding-right: 200px;
  }
  </code></pre>
  
  <p>Text on the first line turns red (so that I know what's going on) but the margin and padding doesn't do anything.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='poem'&gt;
      &lt;ul class='poem'&gt;
          &lt;li&gt;Here's one line of the poem&lt;/li&gt;
          &lt;li&gt;This is the second line of the same stanza, which is long and will wrap around&lt;/li&gt;
          &lt;li&gt;Part of the line above is now on line 3, and looks like it's supposed to be a line of its own.&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>