link on a bootstrap glyphicon

Question

I have the following rails code

<%= link_to mypath do %>
    <%= content_tag(:i, "" ,:class=>' icon-eye-open' %>
<% end %>
<%= @num %>

which generates the html

<a href="/mypath">
    <i class=" icon-eye-open"></i>
</a>
100

The problem is, as seen in the jsfiddle here, that when mousing over the icon, there is a space underlined between the number and the icon. The space is needed for visual purposes, but how do I remove the underline of the link without css?

Why without? I could do text-decoration: none; for some css selector, specific or generic, but I want to understand why this underline happens. If the @num is removed, there is no underline, and since it is outside of the anchor tag, it shouldn't affect it. Yet, it obviously does.

Answer 1

This is happening due to the whitespace after the </i>

Try switching your code in the jsFiddle to:

<a href="/mypath"><i class=" icon-eye-open"></i></a>100

and the problem goes away.

This is because the <i> element is inline (or rather, inline-block), which means whitespace is, as a rule, significant.

---

To prevent ERB from including a newline after a tag close it with a trailing -%>, ie:

<%= content_tag(:i, "" ,:class=>' icon-eye-open' -%>