css在文字中间插入下划线,css实现文字自定义下划线

1、文字下划线的实现可以使用原生api：text-decoration:underline

.words{

font-size: 22px;

text-decoration: underline;

}

但是没法调整下划线和文字的间距，太贴文字了也不好看

2、于是就有了第二种方法：边框法，就是利用元素的下边框实现下划线的效果，还可以通过line-height调节距离

.words {

font-size: 22px;

border-bottom: solid 1px #ccc;

line-height: 0.9;

}

但是缺点也是致命的，由于下划线是整个元素的，一旦文字换行，就gg了

这种方法没有实际使用价值

3、最后我们迎来了下划线的终极武器：background，利用background-size(控制下划线粗细)、background-position(控制下划线位置)实现高度可定制话的下划线

.words {

display: inline-block;

font-size: 22px;

background: linear-gradient(grey, grey) no-repeat;

background-size: 100% 1px;

background-position: 0 1.3em;

text-shadow: 0.05em 0 #fff, -0.05em 0 #fff;

}

.dashed {

display: inline-block;

font-size: 22px;

background: linear-gradient(90deg, grey 66%, transparent 0) repeat-x;

background-size: 0.5em 1px;

background-position: 0 1.5em;

text-shadow: 0.05em 0 #fff, -0.05em 0 #fff;

}

css在文字中间插入下划线,css实现文字自定义下划线相关推荐

swift添加下拉刷新_React Native自定义下拉刷新组件
React Native 自定义下拉刷新组件 PullToRefresh 针对猴急一些的同学,可以先在这个 Expo网站在线运行下demo看看效果 . 完整的代码,在 Github仓库 . 下拉刷新, ...
ios微信小程序下拉刷新怎么配_[wx]微信小程序自定义下拉刷新
需求: 在小程序内存在列表等形式的页面内增加下拉刷新功能,提高用户体验感,加强界面操作与交互性: 实现方法: 1.小程序提供的下拉刷新(无法自定义刷新动画) 在页面设置内开启下拉(单独页面设置): { ...
php css下划线,CSS文字下划线的设置方法介绍
在整体网页设计中,最容易识别的风格仍然是带有下划线的蓝色文字,这大部分都是链接到另一个网页中.链接元素默认具有样式,蓝色是默认模式下的唯一颜色.即使现在的链接元素可能不再需要加下划线,文本下的行不仅仅 ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
php css下划线,css下划线与文字之间的距离如何设置？
本篇文章给大家介绍一下css下划线和文字间距离的的设置方法,接下来我们来看看具体的内容. 在上一篇文章中我们介绍了关于css下划线的设置方法,但是设置出来的下划线感觉与文字之间距离太近,有时在网页中会 ...
php语言字体下划线,css中怎么设置字体下划线
css中设置字体下划线的方法:1.使用"text-decoration:underline;"设置下划线样式:2.通过"border-bottom"属性设置下划 ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
浅谈CSS自定义下划线
问题描述: 使用:first-letter将首字母的font-size增大后,下划线text-underline也会变粗. eg: <!doctype html> <html> ...
php css下划线,如何自定义下划线的样式
下划线可以通过设置border-bottom以及background-image的值来自定义下划线的样式下划线一般在文本中是一条黑色的直线,那么如何改变下划线的样式呢?接下来在文章中将为大家详细介绍 ...
[css] 你们团队中css的class命名采用的是什么方式呢？下划线还是横线还是驼峰？
[css] 你们团队中css的class命名采用的是什么方式呢?下划线还是横线还是驼峰? 形式 .a .a-b不用驼峰和_,因为这两样都需要 shift 辅助输入, 驼峰越多,按下shift 键的次数 ...

css在文字中间插入下划线,css实现文字自定义下划线

css在文字中间插入下划线,css实现文字自定义下划线相关推荐

最新文章

热门文章