css before after 简单应用

before和after，用来在元素之前和之后插入内容，一个简单的应用。

p:before{
content: ‘h’;
}
p:after{
content: ‘d’;
}

ello worl

会输出hello world ，也就是在元素之前和之后插入内容。

下面的代码会输出一个类似于微信对话框的聊天框框，利用的也是before和after原理。通过before添加一个宽高为0内容为空但是border为6背景透明右边框颜色为元素底色的矩形（border属性，如果没有宽高会默认从四个角填充），然后通过绝对定位定在正好盖住边框的位置，这时就会出现一个实心的三角形（如果想看见这个三角形需要给右边框设置不同于元素底色的颜色）。重点来了，怎么出现三角形边框呢，就是利用after，再创建一个一模一样的三角形，只不过定位在比before这个三角形往左1px的位置，这样，1px的三角形border就出来了。

.test{
position: relative;
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: #fff;
}
.test:before{
content: “”;
display: block;
position: absolute;
top:10px;
left: -11px;
width: 0;
height: 0;
border:6px solid transparent;
border-right-color:#fff;
z-index: 1;
}
.test:after{
content: “”;
display: block;
position: absolute;
top:10px;
left: -12px;
width: 0;
height: 0;
border:6px solid transparent;
border-right-color: #000;
z-index: 0;
}

下面的代码是做一个提交表单的背景透明。原理是给body（最外层我理解的）铺一张背景图片，然后给元素加before伪类，内容为空宽高和表单的宽高一样，然后透明，定位在表单元素上，重要的是z-index要比表单的小，设置为-1，这样就可以实现背景透明但是文字不透明。我感觉就是三层，最里层是body，中间层是before，最外层是表单。

body{
background: url(img/1.jpg) no-repeat left top;}
#form{
width: 300px;
height: 150px;
position: relative;
}
#form:before{
content: ”;
width: 300px;
height: 150px;
position: absolute;
background: #fff;
opacity: 0.5;
left: 0;
top: 0;
z-index: -1;
}

username:
password: