css :before :after的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。
项目中有时会遇到伪类，即: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;
}