中文字体overflow可能存在的问题

悬赏园豆：50 [待解决问题]

看到一个新颖的链接样式，代码如下：

<!DOCTYPE html>
<meta charset="UTF-8">
<style>
        a{
            display: inline-block;
            position: relative;
            font-size: 2em;
            text-decoration: none;
            padding: 6px 0;
            color: rgba(0,0,0,.2);
            border-top: 3px solid rgba(0,0,0,.2);
        }
        a::before{
            display: block;
            content: attr(data-hover);
            text-align: left;
            position: absolute;
            color: black;
            top: 0;
            left: 0;
            overflow: hidden;
            padding: 6px 0;
            max-width: 0;
            border-bottom: 3px solid black;
            transition: max-width 0.5s;
        }
        a:hover::before{
            max-width: 100%;
        }
</style>
        <a herf="#" data-hover="LADYMANA">LADYMANA</a>
        <a herf="#" data-hover="中文字体">中文字体</a>

出现的问题：

　　1.中文字所在的伪元素的高度不固定，需要指定高度（height: 1em）；

　　2.中文字体会出现闪烁的现象，如下图：

希望回答叙述的详细点，本人刚接触这方面。

CSS html bug

carryme15 | 初学一级 | 园豆：156
提问于：2016-08-23 11:08

< >

所有回答(3)

每个浏览器都是这样吗？

爱吃de馒头 | 园豆：255 (菜鸟二级) | 2016-08-23 14:02

chrome和firefox都会出现这种情况

支持(0) 反对(0) carryme15 | 园豆：156 (初学一级) | 2016-08-23 17:41

@carryme15: 我也实验了一下，确实都这样，我去找了点资料，说：data是自定义属性，一般只使用与英文字符是不会出现bug，中文字符就会出现bug，需要用样式来限制它。

支持(1) 反对(0) 爱吃de馒头 | 园豆：255 (菜鸟二级) | 2016-08-23 20:49

@爱吃的馒头: 带闪烁，效果不完美。有一点很奇怪，第一个汉字是会一点一点出现的，但是后面的汉字只会一个一个出现。

支持(0) 反对(0) carryme15 | 园豆：156 (初学一级) | 2016-08-23 21:51

@carryme15: 这就是中文字符的bug，我还没找到解决的办法，抱歉啦！

支持(0) 反对(0) 爱吃de馒头 | 园豆：255 (菜鸟二级) | 2016-08-23 22:01

你可以试一试其他浏览器，有可能是浏览器不兼容，也有可能是你的代码某个地方写错了仔细检查一下。

大脸猫先生 | 园豆：206 (菜鸟二级) | 2016-08-26 16:48

transition: max-width 0.5s;你可以用一些其他的动画，这个动画会影响的中文划过

God年 | 园豆：219 (菜鸟二级) | 2016-08-30 16:12

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

中文字体overflow可能存在的问题

欢迎，请先登录或者注册。