p:first-line向文本的首行设置特殊样式

p:first-letter向文本首字母设置特殊样式

重点讲：before，：after

1.这两个伪元素中必备“content”,因为是向目标元素的前面、后面插入元素

2.position：absolute则是相对于目标元素

#font::before {
       content: '';    position: absolute;    left: 0;    top: 50%;    width: 100%;    height: 0;border-color: white;     border-style: solid;    border-width: 0 3px;    overflow: hidden;    visibility: hidden;    transition: all .8s;}#font:hover::before{
     top:0;  height: 100%;  visibility: visible;}

伪元素的Width、定位top中的百分比都是相对于目标元素，代码中效果为，从元素的中间向两边形成目标元素的左右边框的动画效果