If you wish for the icon to remain inline with the last word of your text line, you can achieve this by:
<ul class="items">
<li>
<h4>Prevent LineBreakOfPlus<span class="goto">o</span></h4>
</li>
<li>
<h4>Digital Signage<span class="goto">o</span></h4>
</li>
</ul>
and then style it using CSS:
.items {
list-style: none;
margin: 0;
padding: 0;
}
.items li {
border-bottom: 1px solid gray;
margin: 0;
padding: 0;
}
.items h4 {
margin: 0;
}
.items .goto {
background-color: gray;
font-size: 1.6em;
margin-left: 10px; /* optional */
}
If there is no white space between your text and the span, the icon will stick closely to the word even if the li element wraps onto a second line.
You can adjust margin-left for spacing or add a   entity before the span. There are multiple ways to achieve this effect. The choice depends on the visual outcome you aim for.
Fiddle: http://jsfiddle.net/audetwebdesign/VsBet/ (demonstrates two methods)
Aligning Icon to Right Justified
One technique to position the icon to the right of the h4 element is shown below:
.ex2.items h4 {
position: relative;
line-height: 1.5;
outline: 1px dotted blue;
padding-right: 2.00em;
}
.ex2.items .goto {
background-color: wheat;
line-height: 1.00;
font-size: 1.6em;
position: absolute;
right: 0;
bottom: 0.0em;
height: 1.00em;
width: 1.00em;
outline: 1px dotted red;
}
Utilize absolute positioning for the span to keep it at the right and bottom of the h4. If the h4 spans multiple lines, the icon will drop down accordingly. Adjust positioning based on the icon's size. To prevent overlapping text as the window size changes, include some padding-right in h4.
Note: Specifying accurate line-height values helps address uncertainty regarding the icon's height. Adjust these values as needed to vertically align the icon.