css使用伪元素:before添加元素(竖线、图标、文字等等)

1、添加竖线

.quesContent {
	position: relative;
	&::before {
		position: absolute;
		margin-top: 24px;
		margin-left: 7px;
		height:calc(100% - 24px);
		width: 1px;
		background: #cccccc;
		content:'';
	}
}

线可随div高或宽进行改变。

2、添加图标

3、分割线效果

p:before{
    content:'';
    display:inline-block;
    width:100px;
    height:2px;
    background:pink;
    margin:5px;
 }
 p:after{
    content:'';
    display:inline-block;
    width:100px;
    height:2px;
    background:pink;
    margin:5px;
 }
<p>分割线</p>

4、对话框效果

div {
	width: 180px;
	height: 36px;
	line-height: 36px;
	background: #c0eeff;
	border-radius: 5px;
	font-size: 14px;
	text-align: center;
	position: relative;
}
 
div:before {
	content: "";
	position: absolute;
	top: 10px;
	left: -14px;
	/* 画三角形 */
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 20px solid #c0eeff;
	border-bottom: 10px solid transparent;
	border-left: 0 solid #c0eeff;
 
}
 
 
<div>快来和我聊天吧~</div>

5、添加图标

<div class="richtext">
    <p>Free Shipping, Free Tax</p>
    <p>Shipping By Fedex, UPS, usps etc</p>
    <p>2-7 Bussinsee Days Delivery</p>
    <p>2 Years Warranty</p>
</div>


.richtext p {
    position: relative;
    padding-left: 25px;
}
.richtext p:before {
    position: absolute;
    content: '';
    background: url(//cdn.shopifycdn.net/s/files/1/0603/6314/5428/t/2/assets/tick.svg?v=7750027145936929006);
    left: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
}