6

Is there a way to translate css selectors(::after, ::before) content using ngx-translate ?

.custom-file-label::after {
    content: "Browse"
}
Dhibin Dinesh
  • 71
  • 6

1 Answers1

7

in html add

 <div class="custom-file-label" [attr.your-custom] = "{{ 'Browse' | translate}}"></div>

and in css

.custom-file-label::after { 
        content: attr(your-custom);
 }
MargeKh
  • 145
  • 2
  • 9
  • 2
    we had to remove the square brackets around `[attr.your-custom]` because the following value is a template expression and not an identifier from the ts class. Then it worked great, but it left us with a warning complaining that your-custom is not an allowed attribute. Using the prefix `data-` did not help with that either. – Cee McSharpface Sep 15 '22 at 14:01
  • I happend to have a similar problem and @Margeth answer pointed me to the right direction. There is a small issue when 'sth.sth' is not a string. In my working example, which uses json translate file I had to use a variable instead of string | translate and do the manual translation inside typescript file: this.translate.instant(variable). Now works like a charm. – Tyiliyra Dec 20 '22 at 16:55