css下划线样式长度,css如何设置下划线长度

如何div css设置文字字体下划线距离间距

使用padding-bottom样式实现字体文字下划线距离设置。

传统的css下划线text-decoration样式只能设置其文字下划线样式而无法实现下划线与文字间距调整。所以借助与padding属性模拟下划线实现文字与下划线之间距离可调节。

!DOCTYPE html 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=gb2312" / 

title文汇建站/title 

style 

.divcss5-x5{ padding-bottom:5px; text-decoration:underline;} 

.divcss5-x10{ padding-bottom:10px;  text-decoration:underline;} 

/style 

/head 

body 

p 

下划线divcss5距离调节实例 

span class="divcss5-x5"我下划线距离为5px/span, 

span class="divcss5-x10"我的下划线距离为10px/span

/p 

/body 

/html

相关问答

Q1: css中下划线和文字部分重叠且长度和文字自适应

方法一：text-decoration-skip指定覆盖关系

text-decoration-skip是与text-decoration相关的CSS3属性。

效果很不错，不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值。

此方法是最原生的，但是由于兼容性问题，目前还不太合适。

方法二：使用border-bottom属性模拟

我觉得这是一个不错的想法，CSS博大精深，哈哈。^.^

内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果。（张老师的原话）

代码如下：

a {

text-decoration: none;

border-bottom: 1px solid;

}

这样写的有点在于border-bottom还有dashed属性，我们还可以创造虚线下划线 :P

a {

text-decoration: none;

border-bottom: 1px dashed;

}

效果图：金玉全王

方法三：使用box-shadow属性模拟

使用box-shadow的想法也是很棒的，其实动动脑子，CSS还有好多玩法。(●'◡'●)

直接上代码~

a {

text-decoration: none;

box-shadow: 0 1px;

}

这里box-shadow用了两个值，在这里解释一下：

box-shadow: h-shadow v-shadow blur spread color inset;

此处的两个值分别是 h-shadow 和 v-shadow。

h-shadow：水平阴影的位置。允许负值。

v-shadow：垂直阴影的位置。允许负值。

垂直阴影为1px于是就有了下划线的样子。

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

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

Q2: css样式中怎样控制下划线的粗细?

1、如果想修改一下下划线的颜色，大小等样式就可以通过border属性来设计，使用起来更灵活。

2、border-bottom属性，用来设置底部的边框样式。

3、border-bottom: #FF0000 2px solid ;设置边框大小为2PX的红色边框。

4、看一样效果，发现下划线是整个屏幕的宽度，所以接下来要修改一下宽度。

5、宽度设置成180px，宽度根据 实际情况调整就可以了。

6、最后显示下划线效果。

Q3: css 样式，怎样控制下划线长度

其实可以写个div，给div的下边框加上线条，控制div的长度就可以了

.token {

    width: 300px;

    border-bottom: 1px solid black;

}

div class="token"外婆家私房菜:账户管理/div

Q4: css文字下划线能设置距离

有时候UI设计的时候文字下方会有一个下划线，所以我们经常用 text-decoration:underline 来设置一个下划线，但是呢，发现这个下划线和文字特么的重合了，来没法设置，只能用别的方法代替了，啪啪啪的写一大堆css

现在宣布： 春天来了: text-underline-offset

这个css可以设置距离文字的距离，百分比，还有一个注意点就是一定要和 text-decoration:underline 一起使用，否则不起作用，下面看一个例子

html

css