CODEWITHSUNDEEP
htmlcss
user4245652
user4245652

Reputation:

Using psuedo elements for the style of an ordered list, while preserving indentation

I have a situation where the CMS is generating a list of the form

<ul>
    <li>
        <a>Here's list item 1, which will wrap onto the next next due to the size of the ul element containing it</a>  
    </li>
    <li>
        <a>Here's list item 2, which will wrap onto the next next due to the size of the ul element containing it</a>          
    </li>
    <li>
        <a>Here's list item 3, which will wrap onto the next next due to the size of the ul element containing it</a>          
    </li>
</ul>

and I need the client wants the list style to be '>' characters and be a different color than the text. So I decided to use the classic pseudo-element hack, but now the problem is that I want the text to be aligned when it wraps to the next line, as in normal lists. I've tried seemingly every combination of padding/text-indent/margin over the li and li:before elements, but can't get it right.

Here's a fiddle of the scenario:

http://jsfiddle.net/t0wxsf0j/

Upvotes: 0

Views: 27

Answers (1)

Jonathan
Jonathan

Reputation: 6537

Could you give your pseudo element a negative margin:

ul > li:before {content: ">";margin-left:-.8em;}

http://jsfiddle.net/t0wxsf0j/1/

Upvotes: 1

Related Questions