css：用 ::after 内容装饰 div 而不换行

Question

我已经尝试了一段时间以获得一个列表，使主列表文本在内容列中左对齐，“+”符号在同一行右对齐。我在 Firefox 中完美运行，只是发现比单行长的行（因此会有省略号溢出）在 IE 和 chrome.

中包含“+”符号

我从项目中提取的示例位于 https://jsfiddle.net/qo65Lg2n/2/。因为这是一个摘录，所以有些东西比如类别编号没有正确显示。

是否有另一种方法可以在所有三种主要浏览器中工作？

谢谢

html:

<div style="width: 1000px; text-align: center; margin: auto">
<div class="sfexpandableListWrp">
    <ol class="sflistList">
        <li class="sflistItemTitle">
            <a class="sflistItemToggleLnk" href="#">
                this is a short list title
            </a>
        </li>
        <li class="sflistItemTitle">
            <a class="sflistItemToggleLnk" href="#">
                this is a really really really really really really really really really really really really really really long list title
            </a>
        </li>
        <li class="sflistItemTitle">
            <a class="sflistItemToggleLnk" href="#">
                something
            </a>
        </li>
    </ol>
</div>
</div>

css:

.sfexpandableListWrp
{
    max-width: 500px;
    text-align: left;
}

.sfexpandableListWrp .sflistList
{
    margin-bottom: 23px;
    list-style-type: none;
}

.sfexpandableListWrp .sflistItemTitle
{
    font-size: 1em;
    font-weight: bold;
    float: left;
    width: 100%;
    background-color: #1BB2A0;
    border-radius: 8px;
    line-height: 3.7em;
    margin-bottom: 1em;
}
/* List item toggle link */
.sfexpandableListWrp .sflistItemToggleLnk
{
    padding-left: 15px;
    color: white;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 4em;
}
.sfexpandableListWrp .sflistItemToggleLnk::before
{
    content: "Category " counter(category-counter) ": ";
    color: black;
    font-family: "VAGRoundedBT-Regular";
    counter-increment: category-counter;
}
.sfexpandableListWrp .sflistItemToggleLnk::after
{
    content: "+";
    color: white;
    float: right;
    clear: right;
    font-size: 2em;
    background-color: #88CEB4;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0 0.5em;
    margin-right: -2em;
}

Answer 1

.sfexpandableListWrp .sflistItemToggleLnk {
  padding-left: 15px;
  color: white;
  display: block;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 4em;
}

试试这个。它可能会帮助你..

Answer 2

使用绝对位置可能对您有所帮助。

首先，将::after元素更改为position:absolute并删除margin-right,float属性

.sfexpandableListWrp .sflistItemToggleLnk::after
{
    position:absolute;
    top:0;
    right:0;
    content: "+";
    color: white;
    font-family: "VAGRoundedBT-Regular";
    font-size: 2em;
    background-color: #88CEB4;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0 0.5em;
}

第二个添加position:relative到父.sflistItemToggleLnk

.sfexpandableListWrp .sflistItemToggleLnk {
    padding-left: 15px;
    color: white;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 4em;
    position:relative;
}

希望这就是你想要的

css：用 ::after 内容装饰 div 而不换行

css: decorating a div with ::after content without wrapping

html

css

css-float