Is it possible to prevent li:before from forcing a list item paragraph to the next line (JSFiddle inside)?

Question

I'm using FontAwesome icons as custom bullets for my unordered lists, but using li:before seems to change the behavior of paragraph tags in list items.

See this JSFiddle for a paragraph tag in action in two different lists. One with li:before, one without.

HTML:

<ul class="before">
    <li>list item 1</li>
    <li>
        <p>list item 2 (paragraph)</p>
        <p>list item 2 (sub paragraph)</p>
    </li>
    <li>list item 3</li>
</ul>
<br />
<br />
<ul>
    <li>list item 1</li>
    <li>
        <p>list item 2 (paragraph)</p>
        <p>list item 2 (sub paragraph)</p>
    </li>
    <li>list item 3</li>
</ul>

CSS:

.before li:before {
    content:"B4";
    color: red;
    margin-right: 8px;
}

How can I get list item paragraphs to appear on the same line as the li:before?

score 2 · Accepted Answer · answered Nov 18 '14 at 17:51

2

Being that paragraphs are block elements, they will start a new line... that is, unless you float the item in front it. There are some other styling issues which arise from this, but I'm sure you can figure those out (I compensated for some of the issues in my example):

http://jsfiddle.net/ryanwheale/ko2efv7b/2/

.before li:before {
    content:"B4";
    color: red;
    margin-right: 8px;
    float: left;
}

answered Nov 18 '14 at 17:51

Ryan Wheale

26,022
8
76
96

This relies on the user knowing the width of the `:before` content to properly reset padding, right? – Josh Burgess Nov 18 '14 at 17:58
Not really - for some reason floating the pseudo element caused the bullets to appear inside the list ([see here](http://jsfiddle.net/ryanwheale/ko2efv7b/3/)). There may be a better solution, but I'm not going to find it for free ;) – Ryan Wheale Nov 18 '14 at 18:00
Touché - if it were my project, I'd use the code I posted ;) It's kind of moot anyways as the OP is actually *replacing* the bullets. [Here's an example with different sized "bullets"](http://jsfiddle.net/ryanwheale/ko2efv7b/6/) – Ryan Wheale Nov 18 '14 at 18:18
`list-style-image`, or this answer here: http://stackoverflow.com/questions/5306640/how-to-set-the-color-of-bullets-in-ul-li-lists-via-css-without-using-images-or – Josh Burgess Nov 18 '14 at 18:21

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

You should probably accept Ryan's answer, but in case you want a much more hackish answer that doesn't require you to know the width of the before content, here's my attempt:

Fiddle with hiding dots

CSS

.before li {
    list-style: dot outside none;
}
.before li:before {
    content:"B40M8UW0T?";
    color: red;
    margin-right: 8px;
    float: left;
    list-style: dot outside none;
    display: list-item;
    position: relative;
    z-index: 2;
    background-color: white;
}

Fiddle with a green background illustrating the hack

So, basically we're telling the browser to display that :before pseudo to display as a list-item itself, and then hiding the resultant bullet point for the actual list item by matching the background-color of the underlying element. In the fiddle I left the ul green to illustrate this happening.

It's not a perfect solution, but there won't be a perfect solution for what you're looking to do without a tremendous amount of effort.

Cheers.

Is it possible to prevent li:before from forcing a list item paragraph to the next line (JSFiddle inside)?

2 Answers2

Fiddle with hiding dots