场景举例
如何实现 在线课程 字体下方的 短横线 样式效果
思考过程
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: ; }