css属性:before、:after的position绝对定位：设置短线（类似于边框样式）（横向、垂直方向） - 代码篇

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绝对定位：设置短线（类似于边框样式）（横向、垂直方向） - 代码篇 ” 的全部内容。