样式集中在 :before content

Question

我有一个列表，其中在我的 li 标签的 :before pseudo-element content 属性中定义了不同长度的标题。 li 标签本身的内容也有不同的长度。

由于标题的长度各不相同，最具体地说，我使用了各种 display: table 属性来保持内容对齐。下面是一些相关位 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.

然后提出了这个想法，只在标题上有一个背景，从内容延伸，像这样：

或者甚至像这样的东西，不太受欢迎，但如果对这两者都有解决方案，可能会给社区带来一些规范的好处：

只需在 :before 上放置一个 background-color 即可使背景扩展到 li 实际内容的整个高度。

我们在 :before pseudo-element 上使用 position: absolute 时运气不错，但随后我们又回到设置固定宽度以相对于标题定位内容，我们正在尝试这样做从一开始就避免。

所以...

1。有没有办法使用 `ul`/`li` 结构来完成此操作？

2。如果没有，我有什么选择？转到 2 列浮动 div 布局，这样我就可以更好地控制标题的样式？

Answer 1

结合 float 和 table-cell，这是可以实现的。

场景 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>

场景 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>

Answer 2

分别在 <ul>、<li> 和内部元素上使用 display: table、display: table-row 和 display: table-cell 将实现此目的。这具有将标题存储在 HTML 而不是 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;
}

结果

完整 demo.

样式集中在 :before content

Concentrated styles on :before content

html

css

pseudo-element

所以...

1。有没有办法使用 `ul`/`li` 结构来完成此操作？

2。如果没有，我有什么选择？转到 2 列浮动 div 布局，这样我就可以更好地控制标题的样式？

样式集中在 :before content

Concentrated styles on :before content

html

css

pseudo-element

所以...

1。有没有办法使用 ul/li 结构来完成此操作？

2。如果没有，我有什么选择？转到 2 列浮动 div 布局，这样我就可以更好地控制标题的样式？

1。有没有办法使用 `ul`/`li` 结构来完成此操作？