Question

I need to make a custom list-style markers. Now it’s done by adding element before li, but exist one problem. The remaining lines should be aligned with the text for the marker, such as normal marked list, but they don’t.

li p::before {
    content: "* ";
}

How I make padding for second, third and etc lines, and make it cross-browser? (IE8+, FF3+, Opera 11+ and Crome)

Answer 1

li p:before { /* thanks Michael */
    content: "* ";
    float:left;
}
li p {
    overflow:auto;
}

Maybe this will work. May I know why can’t you use images (simple curiosity)?

EDIT: I was wrong, :before insert pseudo-element before content, so

<div id="wrap">

    <ul>

        <li><p>Get order of list items in a jQuery Sortable list after resort ... The trick is I would like to capture the order of the items immediately ... And I'm aware that it's also possible to assign a call-back function that fires when sorting st</p></li>
    </ul>
</div>

---

#wrap
{
    position: absolute;
    top: 100px;
    left: 100px;
}

li
{
    list-style-type: none;
}

li p
{
    overflow:auto;
}

li:before {
    content: "* ";
    float:left;
}

will work.