css完成国际化

前提

在日常处理国际化的时候，通常是将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完成网页的国际化的更多相关文章

  1. 基于CSS+dIV的网页层，点击后隐藏或显示

    一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...

  2. 基于CSS的个人网页

    前端时间做的CSS作业:基于CSS的个人网页 基于CSS的个人网页 效果图: 代码: <!DOCTYPE html> <html> <head> <meta ...

  3. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  4. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  5. 学习笔记 第五章 使用CSS美化网页文本

    第五章   使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...

  6. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  7. Atitit事件代理机制原理 基于css class的事件代理

    Atitit事件代理机制原理 基于css class的事件代理 1.1. 在javasript中delegate这个词经常出现,看字面的意思,代理.委托1 1.2. 事件代理1 1.3. 代理标准化规 ...

  8. 基于Css反射形自触发事件，优化你的延时事件

    昨天听w3ctech分享时候,说道orientationchange在不同OS和版本中,存在兼容问题,很多时候触发时候都没有渲染结束,开发同学一般都是基于setTimeout一段时间之后,在去执行具体 ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. git本地仓库连接同步修改远程仓库

    如何使用GIT BASH同步远程仓库 1. 新建一个目录 2. 右键GIT BASH 3. git clone git@github.com:purity12138/221701117.git (SS ...

  2. 理解String的intern()方法

    API文档中的介绍: intern public String intern() Returns a canonical representation for the string object. A ...

  3. Linux安装maven超级详细步骤

    一 服务器联网情况下安装maven 1.安装wget命令 如果需要通过使用wget命令,直接通过网络下载maven安装包时,需要在linux系统中安装wget命令. yum -y install wg ...

  4. Linux-socket编程接口介绍

    1.建立连接 (1).socket.socket函数类似于open,用来打开一个网络连接,如果打开成功则返回一个网络文件描述符(int类型),之后我们操作这个网络连接都可以通过这个网络文件描述符. ( ...

  5. JDBC-使用Java连接数据库-基础篇

    这是小主第一次写Java连接数据库博客,初学Java之时,Java连接数据库是我最头疼的,不过经过一个月的学习,也差不多略有收获,所以给大家分享一下. Java连接数据库大约需要五大步骤: 创建数据库 ...

  6. 调用支付宝接口的简单demo

    依赖: <!-- alipay-sdk-java 注意一下版本--> <dependency> <groupId>com.alipay.sdk</groupI ...

  7. JVM探秘：jmap生成内存堆转储快照

    本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. jmap 命令用来生成内存堆转储快照,一般称为heapdump或dump文件. 除了使 ...

  8. C# 基础Array

    一.Array的作用 连续定义多个相同类型的变量,比如我定义1000个学生的学生年龄,int[] age = new int[1000];不需要慢慢的一个一个变量的定义,数组是不是很方便. 需要注意的 ...

  9. Problem for Nazar CodeForces - 1151C （前缀和）

    Problem for Nazar Nazar, a student of the scientific lyceum of the Kingdom of Kremland, is known for ...

  10. tensorflowlite 分类模型从训练到安卓部署

    https://blog.csdn.net/qq_33200967/article/details/82773677