How to add custom labels to a rating scale survey

CSS Knowledge Bonanza! 🕺
1

Hello Everyone!

I recently came across a question on how to add custom labels to a rating scale survey, and I wanted to share a solution using CSS. If you're looking to add labels like "Worst" and "Best" below specific rating values, this might be helpful for you.

Step 1: CSS Setup

You can use the following CSS code to achieve this:

.ss-chat-rating__item:first-child,
.ss-chat-rating__item:last-child {
  position: relative;
}

.ss-chat-rating__item:first-child::after,
.ss-chat-rating__item:last-child::after {
  content: 'Worst';
  position: absolute;
  top: 110%;
}

.ss-chat-rating__item:last-child::after {
  content: 'Best';
}

Step 2: Applying the CSS

This code targets the first and last rating items in your survey and adds the labels "Worst" and "Best" respectively. You can customize the labels and the CSS as needed to match your survey design.

Simply paste this CSS code into your survey's styling , and you should see the labels appear as desired.

Feel free to ask if you have any questions or need further assistance. Happy survey designing! :blush:

Cheers
Jay