underline <a> and <span> like a whole link

Question

I am trying to underline with one line the <a> and the <span>

I want it all to be a link with an underline. It leaves a small space between the word and the span, but it shouldn't.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<a  href="#" role="button">
    Saber mais   
    <span class="glyphicon glyphicon-menu-right size"></span>  
    <span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
    </a>

Edit 1: And when the text size is higher than the glyphicon? the icon has a thin line and the text a heavy line!

Answer 1

You may add it on hover, but you need to pay attention as there is top:1px set to the icons by default so you need to remove it to have a full continuous line:

a.good .glyphicon {
  top: 0;
}

a:hover .glyphicon {
  text-decoration: underline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button" class="good">
Good one   
<span class="glyphicon glyphicon-menu-right size"></span>  
<span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
</a>
<br>
<a href="#" role="button">
Bad one   
<span class="glyphicon glyphicon-menu-right size"></span>  
<span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
</a>

Another solution is to make them inline as by default they are inline-block and if you refer to the specification:

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

a .glyphicon {
  top: 0;
  display: inline;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button">
Saber mais   
<span class="glyphicon glyphicon-menu-right size"></span>  
<span class="glyphicon glyphicon-menu-right size segundoGlyph "></span>
</a>

---

And to explain the small line you see between the two icons initially:

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped

So if you remove any white space you will see the line under the text only:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button">
Good one<span class="glyphicon glyphicon-menu-right size"></span><span class="glyphicon glyphicon-menu-right size segundoGlyph "></span></a>

UPDATE

As pointed in the comment, different font-size between the text and the icon will make the underline different, so we may rely on border in this case:

a:hover {
 text-decoration:none!important;
 border-bottom:1px solid
}
.glyphicon {
  font-size:20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<a href="#" role="button">
Good one<span class="glyphicon glyphicon-menu-right size"></span><span class="glyphicon glyphicon-menu-right size segundoGlyph "></span></a>