前提

在日常处理国际化的时候，通常是将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. ORM之基础操作进阶

    一.外键自关联(一对多) 1.建表 # 评论表 class Comment(models.Model): id = models.AutoField(primary_key=True) content ...

  2. JavaWeb-HttpServletResponse对象一

    web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象,和代表响应的response对象.resquest和response对象既然代表请求和响应,那么要 ...

  3. Oracle中to_number()函数的用法

    to_number()函数是oracle中常用的类型转换函数之一,是将一些处理过的按一定格式编排过的字符串变回数值型的格式. 1.to_number()函数可以将char或varchar2类型的str ...

  4. python学习笔记（二十）初识面向对象

    面向对象的编程的主要思想是把构成问题的各个事物分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描述一个事物在解决问题的过程中经历的步骤和行为.对象作为程序的基本单位,将程序和数据封装其中, ...

  5. 【基础算法】- 个人认为最快的 Fibonacci 程序

    public class Fibonacci { private static Map<Long,Long> map = new HashMap<Long,Long>(); s ...

  6. 使用 Task 简化异步编程

    .Net 传统异步编程概述 .NET Framework 提供以下两种执行 I/O 绑定和计算绑定异步操作的标准模式: 异步编程模型 (APM),在该模型中异步操作由一对 Begin/End 方法(如 ...

  7. nginx的access_log与error_log（三）

    本篇介绍一下在nginx服务器的的两种日志的查看.   根据你找出来的地址,尽心vi编辑,进入nginx.conf文件进行查找路径     从而找到,我机子的两个日志存放地点: /var/logdat ...

  8. Linux服务器access_log日志分析及配置详解（一）

    nginx的log日志分为access log 和 error log 其中access log 记录了哪些用户,哪些页面以及用户浏览器.ip和其他的访问信息 error log 则是记录服务器错误日 ...

  9. SSH查看Linux系统是32位还是64位？

    Linux下如何明确地查看操作系统的位数   如何知晓操作系统是32位还是64位?这里介绍一种简单的方式: [root@localhost mysql-5.1.57]# getconf LONG_BI ...

  10. SQL Server 使用触发器（trigger）发送电子邮件

    sql 使用系统存储过程 sp_send_dbmail 发送电子邮件语法: sp_send_dbmail [ [ @profile_name = ] 'profile_name' ] [ , [ @r ...