【CSS】设置 border 长度

简介: 【CSS】设置 border 长度

场景举例

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

思考过程

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: ;
    }


相关文章
|
24天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
6月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
70 0
|
1月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
12天前
|
前端开发 JavaScript UED
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
50 2
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
26 5
|
3月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
3月前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】
|
5月前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
415 44