Допоможіть додати CSS-cтиль в конструкторі Weblium

Вітаю спільнота! Зараз вчусь збирати сайти на Weblium і стикнувся з завданням для якого треба додати власний СSS-стиль і попри велику кількість спроб, нічого не вийшло. Отже потрібно було додати підкреслення до блоку с пунктами меню, для цього знайшов отакий код:

<style>
.w3rcontainer{
border: 1px solid #cccfdb;
border-radius: 2px;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}

.hover-underline-animation:after {
content: ’’;
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>

Мої знання про використання коду закінчуються на CTRL+C та CTRL+V. Тому декілька разів зробивши все по інструкції й не побачивши результату, здогадався, що десь зробив все не вірно.

На Weblium всім стилям треба давати назву з початком wl- тож мій код виглядає ось так:

wl-underline .w3rcontainer{
border: 1px solid #cccfdb;
border-radius: 2px;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}

.hover-underline-animation:after {
content: ’’;
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}

Але нічого не відображається. Тож буду вдячний, якщо хтось зможе мені тугому розтлумачити, що роблю не так і, як зробити, щоб запрацювало.