Search code examples
vaadinvaadin8

Showing asterisk (*) symbol to the right of label text using CSS

I would like to display asterisk mark on the label text to the right position using CSS but could not succeed in vaadin 8.6.2

.v-label-wrap {
content: " *";
color: red;
position: absolute;
white-space: normal !important;
word-break: normal !important;
word-wrap: normal !important;
}

Label lblAttr = new Label("Name");
lblAttr.addStyleName("wrap");

An asterisk * with red color need to be displayed. Please advice how to solve this problem

Solution

  • Using ::after like this : 

    .v-label-wrap::after {
    content: "*";
    color: red;
}

    More info about after : MDN ::after/:after

    It is often used to add cosmetic content to an element with the content property. It is inline by default.