CSS - making symbol stay always on second line - html

Question

I want to that symbol -> (text element) would only appear in second line. For example if text would be one line
John
->
and if there would be two lines of text symbol would still be on second line.
John and
Tom ->
is it possible?
Currently how it is:
HTML
<div class="inner-box">
<span class="inner-box-text">Category<i class="icon-font icon-long-arrow"></i></span>
</div>
CSS
.inner-box {
bottom: 16%;
left: 10%;
right: 25%;
text-align: left;
position: absolute;
z-index: 3;
height: 51px;
}
.inner-box span {
display: inline-block;
text-align: left;
text-transform: uppercase;
text-decoration: none;
color: white;
line-height: 25px;
max-width: 270px;
padding-right: 5px;
}
.inner-box i {
padding-top: 5px;
}

Answer 1

first of all the span should be closed as well like so:
<div class="inner-box">
<span class="inner-box-text">Category<i class="icon-font icon-long-arrow"></i></span>
</div>
What you are likely looking for is CSS selector :after
<style>
.inner-box-text:after {
content: " --- whatever should come after";
}
</style>
Sadly the :after selector does not support HTML, only text.
Another possibility would be the use of jQuery to append something.
Alex

Answer 2

you can use below code
<div class="inner-box">
<span class="inner-box-text">Category</span><i class="icon-font icon-long-arrow"></i>
</div>
and below css
.vip-inner-box {
bottom: 16%;
left: 10%;
right: 25%;
text-align: left;
position: absolute;
z-index: 3;
height: 51px;
span {
display: inline-block;
text-align: left;
text-transform: uppercase;
text-decoration: none;
font: $font-weight-light 24px $font-custom;
color: white;
line-height: 25px;
max-width: 270px;
padding-right: 5px;
}
}
i {
padding-top: 5px;
display:block;
}