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中的百分比都是相對於目標元素，代碼中效果爲，從元素的中間向兩邊造成目標元素的左右邊框的動畫效果