html - css:在没有包装的情况下用::在内容之后装饰一个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

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

1. 首先，将::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;
   }
   

2. 第二次添加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;
   }
   

希望这是你想要的