css属性：before、：after的position绝对定位：设置短线（类似于边框样式。。
。
css属性:before、:after的position绝对定位：设置短线（类似于边框样式）（横向、垂直⽅向） - 代码篇
1. ⽔平⽅向
/* 这⾥不需要设置width宽度 */
.mui-input-group:before {
position: absolute;
top: 0;
css中的position属性right: 0;
left: 0;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
这⾥注意解决⼿机适配效果：屏幕的1px 像素问题！
效果图：
2. 垂直⽅向：
.name{
padding-left: 46px;padding-top: 15px;
font-size: 18px;color: #333;
position: relative;
}
.name:before{
position: absolute;
right: 94px;
bottom: 0;
top: 10px;
left: 23px;
width: 1px;  /* 严格意义上：最好写上；避免⽂字多的时候线条被拉宽 */
height: 40px;
content: '';
background-color: #cecece;
}
效果图：
以上就是关于“ css属性:before、:after的position绝对定位：设置短线（类似于边框样式）（横向、垂
直⽅向） - 代码篇 ” 的全部内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。