Question

This should be simple, but I’m having problems getting a robust solution. Basically I’m trying to achieve this:

So, an element (a or button) with an icon right-aligned, using an icon font. I need to ensure that:

1. The button can be any width
2. Without an icon present, there is no excess padding on the button
3. The text and icon always remain on the same line (don’t wrap)

Here’s the HTML:

<button class="btn">Download <span data-icon="+"></span></button>

And the (S)CSS:

.btn {
    margin: 0;
    padding: 3px 6px;
    vertical-align: middle;
    border: none;
    background-color: #535B99;
    color: white;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    text-transform: uppercase;
    [data-icon] {
        float: right;
        padding-left: 10px;
        &:before { content: attr(data-icon); }
    }
}

You can see this in a jsFiddle. The problem is, unless I add a width to the .btn class, the icon always drops a line. Absolute positioning would work, but then I’d fail to meet (2) above as it would require some padding. What am I missing?

EDIT

I missed one other criteria:

4.) At 100% width, the icon is aligned to the right (not next to the text)

So in some cases, it’ll look like:

Which is why the float is necessary in my CSS.

SOLUTION

Based almost entirely on @Riskbreaker’s solution, here’s what I settled on:

<button data-button-icon="+" class="btn" href="#">Click Me :P</button>

.btn {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 3px 6px;
    border: medium none;
    background-color: #535B99;
    color: #FFFFFF;
    cursor: pointer;
    text-align: left;    
    text-decoration: none;
    white-space: nowrap;
    &:after {
      content: attr(data-button-icon);
      float: right;
      padding-left: 1em;
    }
}

Basically, abandoning the separate span and using just the button element, which has the benefit of less extraneous markup.

Answer 1

Just take float:right out of [data-icon]

DEMO

If you need to be specific with width (Pixels or Percentages),… then yes you do need float: right so you then need an inner div to control both:

<div>Create Advert HELLO YOU ALL <span aria-hidden="true" data-icon="+"></span></div>

Demo with float:right

As you can see I added width: 300px, and width: 100% works but this is more manual….this is construsively more manual(meaning being specific with your button)…but it works.

So either no width/no float:right needed or add width/float:right needed.

================================================================================
OK so your dilemma is you do not want to deal with dimensions, I made this not using your method but mines using no spans at all…this is my last suggestion:

http://jsfiddle.net/Riskbreaker/st3m2/1/

What you see here is the :before or :after(doesn’t matter which just as long as you have the right padding and float method) method is the best way to get this resolve and my class added the content: plus. Removing “add” class will make the button look right and adding 100% will always have the icon right 🙂