前提

在日常处理国际化的时候，通常是将key通过类似intl.xx(key)转换为对应环境的文案，可是如果需要在css中加入对应逻辑应该怎么做呢（比如在after的伪元素中显示不同的文案），毕竟在css中没办法通过js代码将key转换为文案。

思路

1. 既然不能在css中写入翻译过程，那么就把翻译结果写入dom节点中，可以用data属性存放已经翻译好的文案，<div class='suf' data-suffix="翻译的结果"></div>

2. 在css中读出data-suffix的值作为content的内容， 可以使用attr()来获取指定的属性， .suf::after { content: attr(data-suffix)

css tips —— 在css中完成国际化的更多相关文章

  1. 网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIV CSS命名规则CSS命名大全内容如下：

    页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar         标志:logo      ...

  2. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  3. css鼠标手型cursor中hand与pointer

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  4. 转：浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  5. css在各浏览器中的兼容问题

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml ...

  6. 通过CSS让html网页中的内容不可选

    *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...

  7. CSS modules 与 React中实践

    最近一直在学习React,看上去蛮简单的内容,其实学习曲线还是比较高的. 目前学到css绑定的问题,看到有一篇好的文章,就转过来了. CSS 模块化的解决方案有很多,但主要有两类.一类是彻底抛弃 CS ...

  8. Webpack 2 视频教程 012 - 理解Webpack 中的 CSS 作用域与 CSS Modules

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  9. css层叠性冲突中的优先级

    一.首先从CSS级别来进行优先级划分: CSS控制页面样式的四种方法: 1.行内样式 通过style特性 <p style=”color:#F00; background:#CCC; font- ...

随机推荐

  1. java爬取网页内容 简单例子（1）——使用正则表达式

    [本文介绍] 爬取别人网页上的内容,听上似乎很有趣的样子,只要几步,就可以获取到力所不能及的东西,例如呢?例如天气预报,总不能自己拿着仪器去测吧!当然,要获取天气预报还是用webService好.这里 ...

  2. java 多线程 day16 CountDownLatch 倒计时计数器

    import java.util.concurrent.CountDownLatch;import java.util.concurrent.CyclicBarrier;import java.uti ...

  3. sipp模拟freeswitch分机测试(SIP协议调试)

    1.freeswitch安装 1) 网上很多安装方法都不靠谱,系统版本,各种依赖库一堆问题,下面是验证的可行的. yum install -y http://files.freeswitch.org/ ...

  4. Spark2.0 Pipelines

    MLlib中众多机器学习算法API在单一管道或工作流中更容易相互结合起来使用.管道的思想主要是受到scikit-learn库的启发. ML API使用Spark SQL中的DataFrame作为机器学 ...

  5. 基于python3.6.6的scrapy环境部署+图像识别插件安装

    一.Python3.6.6安装1.安装依赖的二进制软件包yum -y install zlib zlib-devel bzip2 bzip2-devel ncurses ncurses-devel r ...

  6. 修改SQL Service数据库排序规则

    修改数据库 alter   database   KidsPang   COLLATE   Chinese_PRC_CI_AS 修改表中字段ALTER TABLE [Member] ALTER COL ...

  7. POJ1269:Intersecting Lines（判断两条直线的关系）

    题目:POJ1269 题意:给你两条直线的坐标,判断两条直线是否共线.平行.相交,若相交,求出交点. 思路:直线相交判断.如果相交求交点. 首先先判断是否共线,之后判断是否平行,如果都不是就直接求交点 ...

  8. matplotlib绘制饼状图

    源自http://blog.csdn.net/skyli114/article/details/77508430?ticket=ST-41707-PzNbUDGt6R5KYl3TkWDg-passpo ...

  9. debian flam3 依赖文件

    https://packages.debian.org/stable/graphics/flam3     package names   descriptions   source package ...

  10. 怎么创建Porlet项目

    首先找到你liferay安装的地址D:\liferay\liferay-bundles-6.1.1\plugins-sdk,找到portlets这个文件夹点击(shift+鼠标右键)进入命令行窗口,写 ...