Asterisk at the end of required label

Question

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.

Currently i have this 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;
}

<h1><label class="required">something</label></h1>

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.

Current behavior

data....

Expected behaviour

data... *

How to go about solving this ? Plunk link https://plnkr.co/edit/VCSa9iTLRBGYcDdnBzg1?p=preview Please help

Answer 1

Try to use position: absolute for * in :after. Use max-width: 100% instead of width.

I have made some changes in your css.

Stack Snippet

body h1 {
  color: green;
}

label {
  font-size: 113px;
  opacity: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  max-width: 100%;
  padding-right: 60px;
  box-sizing: border-box;
  left: 0;
}

label.required:not(:empty):after,
.field-header.required:after {
  content: " *";
  color: red;
  position: absolute;
  right: 0px;
  top: -15px;
}

<h1>
  <label class="required">Something beautiful</label>
</h1>