Align right with indentation

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.

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?

My attempts:

div.poem li:after
{
 content: " ";
 display: inline-block;
 width: 10px; 
}

Does something, but I don't want it to indent if the text only takes up one line.

div.poem li::first-line::after
{
 content: "asdf";
}

Does nothing

div.poem li:first-line
{
 color: red;
 margin-right: 200px;
 padding-right: 200px;
}

Text on the first line turns red (so that I know what's going on) but the margin and padding doesn't do anything.

HTML:

<div class='poem'>
    <ul class='poem'>
        <li>Here's one line of the poem</li>
        <li开发者_开发百科>This is the second line of the same stanza, which is long and will wrap around</li>
        <li>Part of the line above is now on line 3, and looks like it's supposed to be a line of its own.</li>
    </ul>
</div>

---

Here you go:

p {direction:rtl;padding-right:100px;text-indent:-100px;}

This sets the css direction to be from right to left. Then add right padding to indent the whole thing from the right Then use a negative indent that causes the first line to be "outdented"

Your content and text-flow is still left to right (i.e. breaks on the right), it just interprets the css (e.g. paragraph text-indent) on the other side.

Here's my code:

http://jsbin.com/ukese5/7

---

I found an examples here, where it is explained how to create a left indented list of links. It only seems to work on left aligned text though since the method includes using text-indent. In your case (left-aligned) it would look like this:

div.poem li  { padding-left: 2em; text-indent: -1em;  }
div.poem     { text-align: right; }

I tried right aligning it but that didn't work. Is the text being read from Right-To-Left? In that case this should work:

div.poem li  { padding-left: 2em; text-indent: -1em;  }
div.poem     { direction: rtl; }

I assumed his HTML markup:

  <div class="poem">
    <ul>
      <li>This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.This text goes on for sometime.</li>
    </ul>
  </div>

---

Updated answer based on the your <li> structure:

div.poem li:nth-child(3)  { padding-right: 2em;  }
div.poem { text-align: right; }

Please note that these are CSS3 selectors and that much older browsers don't support :nth-child(). Since the reading of the english text still works you can use that solution also. To learn more you visit the specification page.

Another thought: If you create these <li> using code, you can add a class on the <li> that you want indented. And then use more browser friendly CSS to indent it.

The only thing left is to sort out if you want the bullet points or not. Those can be taken away with:

div.poem ul  { list-style: none; }