css属性:before、:after的position绝对定位:设置短线(类似于边框样式)(横向、垂直方向) - 代码篇
1. 水平方向
/* 这里不需要设置width宽度 */
.mui-input-group:before {
position: absolute;
top: 0;
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绝对定位:设置短线(类似于边框样式)(横向、垂直方向) - 代码篇 ” 的全部内容。