CODEWITHSUNDEEP
css
NiLL
NiLL

Reputation: 13853

How make a cross-browser custom list-style markers?

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)

Upvotes: 1

Views: 1640

Answers (2)

MatTheCat
MatTheCat

Reputation: 18741

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.

Upvotes: 2

Kyle
Kyle

Reputation: 67204

You can either set the p and li to float: left; (example 1)

li
{
    list-style-type: none;
    display: inline-block;
}

li p
{
    display: inline-block;
}

or set the display to inline-block (example 2)

li
{
    list-style-type: none;
    display: inline-block;
}

li p
{
    display: inline-block;
}

Upvotes: 2

Related Questions