<abbr> html tag question mark

Question

I am using Angular Ui-Grid to display a table and have implemented the pager for said table.

It creates a / to represent "of" as in this example "page 1 of 4". But underneath is some strange marking and when the mouse hovers the cursor turns into a question mark as if to say "I have no idea what this is."

This is the markup that is produced:

<span class="ui-grid-pager-max-pages-number ng-binding" ng-show="paginationApi.getTotalPages() > 0" aria-hidden="false">
<abbr ui-grid-one-bind-title="paginationOf" title="of">/</abbr> 4
</span>

Anyone know what is happening here?

Answer 1

This is the natural behavior of the <abbr> tag.

To remove the dashed underline and the question mark on mouse hover, add this css:

abbr {
  text-decoration: none;
}
abbr:hover{
  cursor: default;
}

<span class="ui-grid-pager-max-pages-number ng-binding" ng-show="paginationApi.getTotalPages() > 0" aria-hidden="false">
<abbr ui-grid-one-bind-title="paginationOf" title="of">/</abbr> 4
</span>

Answer 2

fixed it by adding

.ui-grid-pager-panel abbr[title] {
    text-decoration: none;
    border-bottom: none !important;
    cursor: unset !important;
}

to css.