title: Asterisk at the end of required label
body: <p>I am using angular with scss for one of my projects. I am in a situation where i have to display a asterisk with the label when the field is required. </p>
  
  <p>Currently i have this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1{
    color: green;
  }
  
  label {
    position: absolute;
    left: 0;
    cursor: text;
    top: 24px;
    font-size: 113px;
    opacity: 1;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
  }
  
  label.required:not(:empty):after,
  .field-header.required:after {
    content: " *";
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;&lt;label class="required"&gt;something&lt;/label&gt;&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This displays a asterisk properly in the required manner. But i want my asterisk to be displayed at all times irrespective of the width of the screen . Currently '*' wont be displayed in smaller screens ,only ellipsis is displayed.</p>
  
  <blockquote>
    <p>Current behavior</p>
    
    <p>data....</p>
    
    <p>Expected behaviour </p>
    
    <p>data... *</p>
  </blockquote>
  
  <p>How to go about solving this ? Plunk link <a href="https://plnkr.co/edit/VCSa9iTLRBGYcDdnBzg1?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/VCSa9iTLRBGYcDdnBzg1?p=preview</a> Please help</p>