前提

在日常处理国际化的时候，通常是将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. celery-rabbitmq 安装部署

    一:Python安装 1.下载python3源码 wget https://www.python.org/ftp/python/3.5.0/Python-3.5.0.tgz 2.解压 tar xf P ...

  2. 011-Shell 文件包含

    和其他语言一样,Shell 也可以包含外部脚本.这样可以很方便的封装一些公用的代码作为一个独立的文件. Shell 文件包含的语法格式如下: . filename # 注意点号(.)和文件名中间有一空 ...

  3. nginx配置访问图片路径(windows)

    简介 Nginx(("engine x")由俄罗斯的程序设计师Igor Sysoev所开发)是一款自由的.开源的.高性能的HTTP服务器和反向代理服务器:同时也是一个IMAP.PO ...

  4. 斐讯面试记录—阻塞Socket和非阻塞Socket

    文章出自:http://blog.csdn.net/VCSockets/ 1.TCP中的阻塞Socket和非阻塞Socket 阻塞与非阻塞是对一个文件描述符指定的文件或设备的两种工作方式. 阻塞的意思 ...

  5. idea配置mave

    历史信息为同意管理,本博客是从小号迁移而来,‘会飞的鱼la’已经注销 准备工作1.下载idea并激活http://idea.iteblog.com/key.php 2.下载mavenhttp://mi ...

  6. Eclipse 导入Maven 项目报错

    新建Maven项目时出错:org.apache.maven.archiver.MavenArchiver.getManifest   新建Maven项目时出错:org.apache.maven.arc ...

  7. 小练手：用HTML5 Canvas绘制谢尔宾斯基三角形

    文章首发于我的知乎专栏,原地址:https://zhuanlan.zhihu.com/p/26606208 以前看到过一个问题:谢尔宾斯基三角形能用编程写出来么?该怎么写? - 知乎,在回答里,各方大 ...

  8. python 切换工作路径 为指定文件夹

    切换工作路径为了更好的在目录下面执行针对当前项目的命令 比如 git.svn .打包 等操作 关键命令: os.chdir() 切换到指定路径: # sys.path[0] 当前脚本路径 # 当前脚本 ...

  9. saltstack之nginx、php的配置

    saltstack为nginx提供状态配置 1.创建nginx配置需要的目录 mkdir /srv/salt/prod/nginx mkdir /srv/salt/prod/nginx/files 2 ...

  10. 20145324 Java实验一

    北京电子科技学院(BESTI) 实 验 报 告 课程:JAVA 班级:1453 姓名:王嘉澜 学号:20145324 成绩: 指导教师:娄嘉鹏 实验日期:2016.4.8 实验密级: 预习程度: 实验 ...