不一样的方式实现text-decoration: underline;

最新推荐文章于 2024-06-17 14:23:58 发布
最新推荐文章于 2024-06-17 14:23:58 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： css 技术 文章标签： css text-decoration 下划线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39466493/article/details/79741840
版权
技术 同时被 2 个专栏收录
37 篇文章 0 订阅
订阅专栏
css
11 篇文章 0 订阅
订阅专栏

你们有没有遇到过这样的需求呢？？？


用text-decoration: underline;实现的是这样的，


这样产品是不接受的。

解决方法，利用背景图可以实现的。如下：

背景图  

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css下划线</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<style type="text/css">
p{
width: 90%;
text-align: center;
font-size: 12px;
color: #884e28;
background-image: url(repeat.png);
background-size: auto 21px;
    line-height: 21.5px;
    background-repeat: repeat;
}
  </style>
</head>
<body>
<p>我是用背景图加的下划线我是用背景图加的下划线我是用背景图加的下划线</p>
</body>
</html>
yzy_blog
关注
专栏目录
web零碎的基础知识之CSS
qq_43346086的博客
11-23 229
CSS：样式表、级联样式表、层叠样式表 基础语法 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{color:red;font-size:30px;font-family:"黑体";text-align:left;text-indent:2em;} /*实体化三属性*/ p{width:200px;height:200px;backgr
文本修饰、垂直对齐方式、伪类选择器、列表样式
yen_zz的博客
03-27 229
1.文本修饰 1.1.对于一般的元素而言是默认值，定义的标准文本 没有下划线 1.2. a元素是默认就含有下划线 a{ text-decoration: none； }（该语法可去除a元素的下划线） 1.3.设置文本的上划线 a{ text-decoration:overline； } 1.4设置文本的删除线 a{ text-decoration:line-through； } 1.5设置文本的下划线 a{ text-decoration: underline;
文字排版--下划线(text-decoration:underline)
bailang3277的博客
05-30 286
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>下划线样式</title> <style type="text/css"> ...
text-decoration: none或underline
qq_44484894的博客
04-01 7118
text-decoration:none或underline （添加和消除下划线） 开发工具与关键技术：Dream weaver 、HTML、CSS 作者：曾子千 撰写时间：2019年2月10日 通常我们在使用《a》标签后，所引...
你不知道的下划线属性-text-decoration
热门推荐
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
08-30 2万+
创作不易 拒绝白嫖 点个赞呗 关注专栏 学透CSS,带你走进CSS的深处！！！ 前言 上一篇文章我们介绍了这张图，还是这张图，引出本文本文想要介绍的内容，下划线，上划线，删除线。 第一眼看过去，我们看到的是啥？没错，是文字。 text-decoration 定义 text-decoration 是用来设定文本的下划线，上划线，删除线 以下三种属性的简写： text-decoration-line text-decoration-color text-decoration-style text-deco.
css 文字下划线 text-decoration
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
06-17 425
text-decoration为段落文字添加下划线。
学透CSS-你不知道的下划线属性-text-decoration 文本属性（中） （连载中）
2401_84093490的博客
04-10 1231
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取资料领取方式：点击这里前往获取。
CSS的样式
weixin_68485297的博客
03-27 361
一、文本修饰 ext-decoration: none; 默认值，定义的标准文本， 没有下划线 overline; 设置文本的上划线 ine-through;设置文本的删除线 underline; 设置文本的下划线 ☆a元素是默认就含有下划线 二、垂直对齐（——图片和文本） vertical-alig...
CSS样式开发大全！
weixin_44179306的博客
11-13 771
CSS/层叠样式表 CSS 指层叠样式表（Cascading Style Sheets）。 您将学习如何使用 CSS 同时控制整个站点的样式和布局。 通过与 XHTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。 通过使用 CSS 来提升工作效率！ 什么是CSS？: CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是层叠样式表 ( ...
CSS核心样式
weixin_47164448的博客
02-23 257
CSS常用样式 1.font-weight 作用：设置文字是否加粗显示 单词类型：normal、bold、bolder、lighter 数字类型：100-900直接的整百数字。400等价于normal,700等价于bold <p style="font-weight: normal;">默认值</p> <p style="font-weight: bold;">定义粗体字符</p> <p style="font-weight: bolder;">定
解决文字和text-decoration:underline下划线重叠问题
weixin_30915951的博客
11-22 289
一、text-decoration:underline下划线的问题 CSStext-decoration:underline可以给内联文本增加下划线，但是，如果对细节要求较高，就会发现，下划线经常会和中文文字的下边缘搞在一起，英文的话甚至直接穿越，看起来就比较香菇蓝瘦。 上图几个中文下边缘正好都是横线，结果，可以看到，基本上合在一起分不清谁是谁了，换成微软雅黑字体（见下图），似乎变本加厉...
css 文字下划线
alice_nx的博客
02-27 673
伪元素是CSS中一种非常有用的技巧，可以用来为元素添加额外的内容或样式。我们可以利用::after伪元素来实现文本下划线的效果。首先，需要给元素设置position: relative属性，然后通过::after伪元素添加一个绝对定位的下划线，在调整下划线的位置和大小即可。1.可以使用CSS的text-decoration属性和text-decoration-style属性来实现。，不设置任何装饰效果。2.伪元素实现下划线。
CSS下划线与文字间距，下划线粗细以及下划线颜色的设置
weixin_38091374的博客
02-28 1万+
最开始的时候了解下划线的属性是： text-decoration:underline; 1 但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用<u></u>这个标签也是同样的效果。 例子： <!DOCTYPE html> <html> <...
html让text变成线,text-decoration属性(CSS设置文本的修饰线外观)
weixin_26840895的博客
06-17 1207
text-decoration属性在CSS中，使用text-decoration属性，可以在文本上方、下方、或中间添加装饰线，可选值为none|underline|overline|line-through|blink，默认值为none。none无装饰，underline下划线，overline上划线，line-through文字中间贯穿线，blink闪烁。装饰线的颜色与文本的颜色相同。默认情况下...
css中设置字体下划线,css如何设置字体下划线
weixin_30977281的博客
08-04 8968
css设置字体下划线的方法：可以利用text-decoration属性来进行设置，如【text-decoration: underline;】。text-decoration属性用于规定添加到文本的修饰、下划线、上划线、删除线等。属性介绍：text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等。(视频教程分享：css视频教程)语法：/*关键值*/text-decorat...
text-decoration属性
06-04 9859
一、在CSS1中，text-decoration有六个值： text-decoration:none //默认，定义标准的文本，没有任何样式，正常显示 text-decoration:underline //定义文本下的一条线 text-decoration:overline //定义文本上的一条线 text-decoration:line-through //定义文本中...
下列样式定义字体间距为0.5倍间距、水平左对齐、垂直顶端对齐、有下划线 正确的定义是：（ ） A、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：top；text-align：left； } B、 p{text-decoration：0.5em；letter-spacing：underline；vertical-align：top；text-align：left； } C、 p{text-decoration：left；letter-spacing：top；vertical-align：0.5em；text-align：underline； } D、 p{text-decoration：underline；letter-spacing：0.5em；vertical-align：left；text-align：top； }
06-03
在CSS中，可以使用`letter-spacing`属性来定义字体间距，使用`text-align`属性来定义水平对齐方式，使用`vertical-align`属性来定义垂直对齐方式，使用`text-decoration`属性来定义下划线。根据题目的要求，可以将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值