Concentrated styles on :before content

Question

I have a list with titles of varying length defined in my li tag's :before pseudo-element content property. The contents of the li tags themselves are of varying length as well.

Due to the varying lengths, of the titles most specifically, I have used the various display: table properties to keep the content aligned. Some of the relevant bits are below, click here for a full sample.

ul {
    display: table;
    margin: 0;
    padding: 0;
    border-collapse: seperate;
    border-spacing: 0 2px;
}

li {
    display: table-row;
    list-style: none;
    margin: 0;
    padding: 0;
}

li:before {
    display: table-cell;
    font-weight: bold;
    margin: 0;
    padding-right: 5px;
    text-align: right;
    width: 1px;
    white-space: nowrap;
}

A NOTE: Using the width property on the :before pseudo-element, rather than the display: table method, was initially proposed as a solution to line up the content, but the varying lengths of the titles steered us away from that direction so that the title column could be as narrow or wide as the content allowed, not based on a fixed metric.

The idea was then raised to have a background on just the title, extending from the content, like so:

Or even something like this, less preferred, but may offer some canonical benefit to the community if there is a solution to both:

Just putting a background-color on the :before makes the background extend the full height of the li's actual content.

We had some luck using position: absolute on the :before pseudo-element, but then we are back to setting fixed widths to position the content relative to the title, which we were attempting to avoid from the get go.

So...

1. Is there a way to accomplish this using the ul/li structure?

2. If not, what are my options? Go to a 2 column floating div layout that then gives me greater control over the styles of the title?

Answer 1

Using display: table, display: table-row and display: table-cell on the <ul>, <li> and inner elements respectively will accomplish this. This has the added benefit of storing the titles in the HTML instead of the CSS.

HTML

<ul>
    <li>
        <h3><span>A Really Long Title Here</span></h3>
        <p>Lorem ipsum dolor sit amet, tractatos erroribus conceptam an sed. Inani dicant graeci id duo, vero perfecto maluisset ut eos. Agam veri ubique ne mei, ferri perpetua prodesset duo an, nam quas everti commune te. At justo dicant similique vel.</p>
    </li>
    <li>
        <h3><span>A Medium Title</span></h3>
        <p>Lorem ipsum dolor sit amet, tractatos erroribus conceptam an sed. Inani dicant graeci id duo, vero perfecto maluisset ut eos..</p>
    </li>
    <li>
        <h3><span>Title<span></h3>
        <p>Lorem ipsum dolor sit amet, tractatos erroribus conceptam an sed.</p>
    </li>

</ul>

CSS

ul {
    display:table;
}

li {
    list-style-type:none;
    margin-bottom:1em;
    clear:both;
    display:table-row;
}

li > h3 {
    display:table-cell;
    margin:0;
    padding:0;
    white-space:nowrap !important;
}

li > h3 > span {
    background-color:lightgray;
    width:100%;
    display:block;
    padding-right:0.5em;
}

li > p {

    display:table-cell;
    margin:0;
    padding:0;
    margin-bottom:1em;
    background-color:lightgray;
}

Result

Full demo.

Answer 2

With some combination of float and table-cell, it's achievable.

Scenario 1:

ul {
    display: table;
    margin: 0;
    padding: 0;
    border-collapse: seperate;
    border-spacing: 0 2px;
}

li {
    display: table-row;
    list-style: none;
    margin: 0;
    padding: 0;
}

li:before {
    display: table-cell;
    font-weight: bold;
    margin: 0;
    padding-right: 5px;
    text-align: left;
    white-space: nowrap;
    background-color: #ddd;
    height: auto;
    float:left;
    width: 100%;
}

.li1:before {
    content: "I AM PRETTY LONG";
}

.li2:before {
    content: "SHORT";
}

.li3:before {
    content: "MEDIUM LEN";
}

div {
    display:table-cell;
    background-color: #ddd;
    vertical-align: top;
}

<ul>
    <li class="li1"><div>Nunc egestas purus vel dui lacinia imperdiet. Nam gravida maximus purus, in ornare turpis pretium at. Suspendisse potenti. Donec condimentum ornare pharetra.</div></li>
    <li class="li2"><div>Praesent imperdiet non arcu pellentesque condimentum.</div></li>
    <li class="li3"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis condimentum odio, et lobortis metus congue vitae. Nam tellus dolor, consequat eget tellus eu, congue congue felis. Donec eget ipsum commodo, porttitor libero eu, dignissim ligula. Proin vel porta lorem. Vivamus varius risus ac venenatis efficitur. Quisque sit amet tellus sed neque tincidunt pharetra. </div></li>
</ul>

Scenario 2:

ul {
    display: table;
    margin: 0;
    padding: 0;
    border-collapse: seperate;
    border-spacing: 0 2px;
}

li {
    display: table-row;
    list-style: none;
    margin: 0;
    padding: 0;
}

li:before {
    display: table-cell;
    font-weight: bold;
    margin: 0;
    padding-right: 5px;
    text-align: left;
    white-space: nowrap;
    background-color: #ddd;
    height: auto;
    float:right;
}

.li1:before {
    content: "I AM PRETTY LONG";
}

.li2:before {
    content: "SHORT";
}

.li3:before {
    content: "MEDIUM LEN";
}

div {
    display:table-cell;
    background-color: #ddd;
    vertical-align: top;
}

<ul>
    <li class="li1"><div>Nunc egestas purus vel dui lacinia imperdiet. Nam gravida maximus purus, in ornare turpis pretium at. Suspendisse potenti. Donec condimentum ornare pharetra.</div></li>
    <li class="li2"><div>Praesent imperdiet non arcu pellentesque condimentum.</div></li>
    <li class="li3"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis condimentum odio, et lobortis metus congue vitae. Nam tellus dolor, consequat eget tellus eu, congue congue felis. Donec eget ipsum commodo, porttitor libero eu, dignissim ligula. Proin vel porta lorem. Vivamus varius risus ac venenatis efficitur. Quisque sit amet tellus sed neque tincidunt pharetra. </div></li>
</ul>