解决文字和text-decoration:underline下划线重叠问题

CSS text-decoration:underline可以给内联文本增加下划线，但是，如果对细节要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。

解决方法：

1.使用border-bottom属性模拟

a {text-decoration: none;border-bottom: 1px solid;
}

如果觉得border-bottom模拟的下划线还是和文字走得太近，我们可以使用padding-bottom再撑开点距离，例如：

a {text-decoration: none;border-bottom: 1px solid;padding-bottom: 5px;
}

注意，使用 border-bottom 模拟下划线的时候， border-color 最好缺省，这样就会使用文字的 color 颜色作为边框色，这样，鼠标 hover 的时候，下划线会自动和文字一起变色，类似下图效果：

2.使用box-shadow属性模拟

a {text-decoration: none;box-shadow: 0 1px;
}

同样，建议颜色值缺省，使用color属性的颜色值。

效果基本上和border-bottom如出一辙

相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。

但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。

原文链接：http://www.zhangxinxu.com/wordpress/2016/11/css-text-decoration-underline-skip-override/

解决文字和text-decoration:underline下划线重叠问题相关推荐

html两条下划线重叠,文字和text-decoration:underline下划线重叠问题
一.text-decoration:underline下划线的问题 CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会 ...
解决文字与下划线重叠的问题
最近在网上看了张鑫旭老师的一个帖子(解决文字和text-decoration:underline下划线重叠问题),收获不小.原文链接(http://www.zhangxinxu.com/wordpre ...
html+导航栏+点击下划线,html导航栏点击后出现下划线_【Word教程】教你制作输入文字依然对齐的封面下划线......
点击上方"祕技",关注我们 -助你提升工作技能~ 阅读全文大约需10分钟在学习和生活中,使用word进行封面制作是很常见的应用场景,而下划线又是封面中不可缺少的元素. 很多同学在 ...
html两条下划线重叠,解决文字与下划线重叠的问题
下面我简单的分享一下张鑫旭老师的几种方法. 我们所要解决的问题是:当设置文字text-decoration:underline;的时候,文字和下划线紧贴在一起,看起来很不舒服. 就像这样: 方法一:t ...
Flutter Text 去掉黄色下划线
Flutter 中如果没有使用Material的话Text会有黄色的下划线, 解决方法: 在Text 样式style 中加入属性decoration: TextDecoration.none 如下: ...
html文字居中加下划线,HTML文字对齐，斜体，下划线和删除线
标题的对齐方式: 在默认情况下,标题文字都是靠左对齐的.而在网页的制作过程中,可以实现标题文字的编排设置.最常用的就是关于对齐方式的设置了,可以为标题标签添加"align"属性进行 ...
解决word空格后无法打出下划线
问题即使点击了word开始菜单栏中的下划线选项,也打不出下划线解决办法找到word的: 1-文件 -->2-选项-->3-高级-->4-以下对象的布局选项-->5-为尾部 ...
解决word中无法正常生成下划线的问题
今天遇到一个问题,在word中打下划线的时候,无法打出来. 在网上查到了解决方案,在此分享给大家文件--选项--高级--为尾部空格添加下划线(U)--确定
解决前端传的数据是下划线命名而后端是驼峰命名的Json传递数据的问题
由于之前个人开发项目都是统一命名,不会出现这种问题,但是到公司实习前后端分离前端是下划线命名,而后端是驼峰命名,所以导致数据的传递需要转换 @JsonProperty("user_id&qu ...

解决文字和text-decoration:underline下划线重叠问题

解决文字和text-decoration:underline下划线重叠问题相关推荐

最新文章

热门文章