Avoid space between DOM when using pseudo class :before

Question

I must be doing some basic thing wrong since I don't want the space between each letters below.

HTML:

<i class="icon icon1"></i>
<i class="icon icon2"></i>
<i class="icon icon3"></i>

CSS:

.icon {
    display: inline-block;
    position: relative;
    padding: 3px;
    background: yellow;
    margin: 0;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

Link: http://jsfiddle.net/qhoc/rkRBY/

I believe the space is automatically there between each character unless font-size:0. My requirements are:

• All chars must be on same line
• There will be more icon4, icon5, etc..
• No space between them without changing font-size
• OK to add HTML wrapper but would not touch JS or changing <i> to something else. I am using Bootstrap by the way.

Let me know if there is workaround! Thanks.

Answer 1

There are two good ways afaik,

• Don't give space in HTML markup between the elements (or)
• add display: table-cell to that element.

Try this:

.icon {
    display: table-cell;
    /* removed padding: 3px; */
    position: relative;
    background: yellow;
    margin: 0px;
}

.icon1:before {
    content: "A";
}

.icon2:before {
    content: "B";
}

.icon3:before {
    content: "C";
}

Working Fiddle