版权声明:本文为博主原创文章,未经博主允许不得转载。
项目中有时会遇到伪类,即:before,:after,如果要实现在每行文字的左右两边加上-就可以使用:before :after
html代码:
<ul>
<li>我是li1</li>
<li>我是li1</li>
</ul>
ul {
width: 200px;
}
li {
list-style: none;
background: #ccc;
margin-bottom: 5px;
}
li::before {
content: '-';
color: red;
}
li::after {
content: '-';
color: blue;
}
有时会实现各种小三角,效果为:
html:
<div class="top-triangle"></div>
<div class="bottom-triangle"></div>
<div class="left-triangle"></div>
<div class="right-triangle"></div>
css为:
/* 上三角 */
.top-triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom: 20px solid yellow;
margin-bottom: 5px;
}
/* 下三角 */
.bottom-triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-top: 20px solid yellow;
}
/* 左三角 */
.left-triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-left: 20px solid yellow;
}
/* 右三角 */
.right-triangle {
width: 0;
height: 0;
border: 20px solid transparent;
border-right: 20px solid yellow;
}
有时会实现微信对话,效果为:
这里html代码为:
<!-- 对话框 -->
<div class="left">
<p>最近怎么样</p>
</div>
<div class="right">
<p>挺好的,最近有点忙,没有怎么联系你</p>
</div>
css代码为:
.left,.right{
min-height: 40px;
position: relative;
display: table;
text-align: center;
border-radius: 7px;
background-color: #9EEA6A;
margin: 0;
}
.left {
left: 10px;
}
.left::before,
.right::after {
position: absolute;
content: '';
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent;
top: 11px;
}
.left::before {
border: 8px solid transparent;
border-right: 8px solid #9EEA6A;
left: -16px;
}
.right::after {
right: -16px;
border-left: 8px solid #9EEA6A;
}
.left p,
.right p {
display: table-cell;
vertical-align: middle;
padding: 0 10px;
}
.right {
right: -150px;
}