make a list item inline when list has list-style-type

Question

I have a simple list:

<div>Why did the duck cross the road?</div>  <!-- div added for context -->

<ul>
    <li>To get to the other side</li>
    <li class="correct">To prove he's no chicken</li>
    <li>because it was the chicken's day off</li>
</ul>

What I want is to highlight the correct answer, so I have the class:

.correct
{
    background: rgba(3, 113, 200, 0.2);
}

FIDDLE

The problem is that I want to highlight only the text of the list item, ie I want the correct item to be inline.

But if I add display:inline / display:inline-block to the .correct class - the list-style-type gets mangled.

FIDDLE

Now, I know that I can add a span element into the markup for the correct item to achieve this like so:

<ul>
    <li>To get to the other side</li>
    <li><span class="correct">To prove he's no chicken</span></li>
    <li>because it was the chicken's day off</li>
</ul>

FIDDLE

..but I was wondering whether I could do this without the extra span.

Answer 1

DEMO

HTML

<ul>
    <li>To get to the other side</li>
    <li class="correct">To prove he's no chickenTo prove he's no chickenTo prove he's no chickenTo prove he's no chickenTo prove he's no chickenTo prove he's no chicken</li>
    <li>because it was the chicken's day off</li>
</ul>

CSS

.correct {
    display:inline;
    background: rgba(3, 113, 200, 0.2);
}

.correct:before {
   content: "";
   display: list-item;
   float: left;
}

Answer 2

You can't have a list style on elements displayed as anything other than list-item.

By floating and clearing your list items, though, you can achieve the same thing. Hide the overflow of the <ul> to clear floats, then I think you've got what you needed:

ul{
    overflow:hidden;
}
ul li{
    float:left;
    clear:left;
}
.correct {
    background: rgba(3, 113, 200, 0.2);
}

JSFiddle