Here is a snippet of LESS code attempting to add a colored background to the :after pseudo-class:
.hexagon:after {
content: "";
position: absolute;
bottom: -50px;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
&.red-light {
border-top: 50px solid @brand-red-light;
}
&.red {
border-top: 50px solid @brand-red;
}
&.red-dark {
border-top: 50px solid @brand-red-dark;
}
&.freen-light {
border-top: 50px solid @brand-green-light;
}
&.green {
border-top: 50px solid @brand-green;
}
&.green-dark {
border-top: 50px solid @brand-green-dark;
}
}
The issue lies within the nested LESS statement such as `border-top: 50px solid @brand-red-light`, which does not appear on the screen upon rendering. I have attempted replacing the "&" symbol with ">" but it did not solve the problem. My goal is to create a CSS hexagon.