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

Question

I've been playing around for a while to get a list to have the main list text left aligned in a content column with a "+" sign right aligned on the same line. I have this working perfectly in firefox, only to discover that lines which are longer than a single line (and therefore will have an ellipsis overflow) are wrapping the "+" sign in IE and chrome.
The example i have extracted from my project is at https://jsfiddle.net/qo65Lg2n/2/. Since this is an extract some things like the category numbering isn't showing correctly.
Is there another way of approaching this that will work in all three major browsers?
Thanks
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

Use position absolute may help you.
first,change the ::after element to position:absolute and delete margin-right,float attribute
.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;
}
second add position:relative to the parent .sflistItemToggleLnk
.sfexpandableListWrp .sflistItemToggleLnk {
padding-left: 15px;
color: white;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 4em;
position:relative;
}
I hope that is what your want

Answer 2

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