css 伪元素

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中的百分比都是相对于目标元素，代码中效果为，从元素的中间向两边造成目标元素的左右边框的动画效果