CSS after with many lang tag

How to better write this code with three translations? I want to use only one class with three translations instead of three class, my code:

.test > li.nav-item:lang(en):nth-child(1):after {
    content: "BNM";
    margin-left: 10px;
}

.test > li.nav-item:lang(fr):nth-child(1):after {
    content: "XYZ";
    margin-left: 10px;
}

.test > li.nav-item:lang(pl):nth-child(1):after {
    content: "YUI";
    margin-left: 10px;
}

i want something like this:

.test > li.nav-item:nth-child(1) 
      &:lang(en):after {}
      &:lang(fr):after {}
      &:lang(pl):after {}

or something like this

Answer

Without a preprocessor you can reduce the code using a CSS variable, e.g.

:lang(en) { --label: "BNM"; }
:lang(fr) { --label: "XYZ"; }
:lang(pl) { --label: "YUI"; }


li.nav-item:nth-child(1)::after {
  margin-left: 10px;
  content: var(--label);
}
<ul class="test" lang="pl">
   <li class="nav-item">1</li>
   <li class="nav-item">2</li>
   <li class="nav-item">3</li>
</ul>

If no lang attribute is defined then the --label variable will be undefined and will not be written in the ::after pseudoelement.

Leave a Reply

Your email address will not be published. Required fields are marked *