场景举例

如何实现 在线课程 字体下方的 短横线 样式效果

思考过程

1.常规方案

看到这样的样式效果，大多数人首先想到的一定是 border-bottom 吧，但是真正写在 css 中，你会发现，效果是这样的

实现了，却又好像没实现，无法设置长度，那么下面我们试着换一种思路去实现这个效果

2.优化方案

我们不要把这个短横线看做 border ，使用 伪元素 实现，可以随意更改大小、宽度、长度等，非常的方便

伪元素

用于设置元素指定部分的样式，可用于设置元素的首字母、首行的样式，在元素的内容之前或之后插入内容等

selector::pseudo-element {property: value;
}

代码实现

.box h1::after {/* 必须设置 content 属性才能生效 */content: '';/* border 宽度 */width: 1000px;/* border 高度 */height: 2px;background-color: #cccccc;/* border 位置 absolute(绝对定位) */position: absolute;left: 295px;top: 705px;bottom: 918px;/* 自动内减 */box-sizing: border-box;
}

通用格式

抽象上述代码为通用格式，日后可应用在其他场景下

selector:after {content: '';position: absolute;left: 0;top: 0;bottom: 0px;right: 0;height: 0px;width: 0px;background-color: ;}

参考资料：

border-position属性详解

【CSS】设置 border 长度相关推荐

css设置字符长度,在css中设置最大字符长度
12 个答案: 答案 0 :(得分:199) 你总是可以通过设置max-width和溢出ellipsis来使用截断方法 p { white-space: nowrap; overflow: hidde ...
css 设置border边框颜色渐变效果
一.效果首先可以看一下下图显示的实现效果: 底部边框,左侧渐变效果右侧边框,上下都有一个渐变的效果点击查看demo代码二.实现 1. linear-gradient 首先我们先了解一下css中 ...
css设置超过长度的以省略号显示
1.一行中超出固定长度的部分以省略号显示 #div1{width: 100px; overflow: hidden; /*内容会被修剪,并且其余内容是不可见的*/text-overflow:ellip ...
border属性 php,如何通过CSS的border属性为图片设置边框效果
如何为通过css为图片设置一个边框呢,HTML中是通过标记的border属性值,给图片添加边框的,css中是通过border属性,为图片设置各式各样的边框样式,border-style定义边框的样式, ...
使html轮廓颜色不同,css中border颜色不同怎么设置？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...
html 边框终点圆点,CSS设置虚线或虚边框dashed border
在网页前端设计过程中,少不了要使用边框,这样页面整体好看一些.边框通常分为两种,一种为实边框另一种为虚边框,实边框用得多一些,但有虚线或虚线边框点缀,网页会更漂亮,所以这两种边框都要使用. 在CSS中 ...
html5border设置彩色,css中border颜色不同怎么设置？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...
使用CSS将文字长度限制为n行
是否可以使用CSS将文本长度限制为" n"行(或在垂直溢出时将其剪切). text-overflow: ellipsis; 仅适用于1行文字. 原文: 纳图克足癣,阿里卡姆,克拉斯 ...
html如何让图片跟字体重叠,CSS设置图片与文字的间距
[实例介绍] CSS设置图片与文字的间距希望图片本身与文字有一定的距离只需要给标记添加margin属性即可.margin属性包括margin．top.margin-right,margin-bott ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...

【CSS】设置 border 长度

场景举例

思考过程

1.常规方案

2.优化方案

代码实现

通用格式

【CSS】设置 border 长度相关推荐

最新文章

热门文章