Notification indicator

by jorgeluis

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<button class="btn btn-link has-notification">
  Button label (.btn-link)
</button>


<div class="ui-grid-cell">
  <div class="ui-grid-cell-contents has-notification">
    <a href="#">how about this for a long piece of text</a>
  </div>
</div>

CSS

.has-notification {
  position: relative;
}
.has-notification::after {
  content: ' ';
  position: absolute;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: red;
}


/* truncated scenario */
.ui-grid-cell {
  width: 180px;
  overflow: hidden;
  float: left;
  box-sizing: border-box;
}
.ui-grid-cell-contents {
  padding: 5px;
  box-sizing: border-box;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 100%;
}