中間文字，兩邊橫線的css3僞類的使用

效果以下：

:before，:after

CSS僞類是用來添加一些選擇器的特殊效果。

使用了css3的僞類，即至關因而在一個div中寫入文字，而後在它先後各加了一個div，而後進行位置及寬高的調節。

 

實現代碼：

<div>中間文字，兩邊橫線</div>
 
 
div {
  font: 400 20px Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
/*CSS僞類用法*/
div:after, div:before {
  background: #000000;
  content: "";
  height: 2px;
  width: 20%;
}

添加類是對選擇器進行添加的，不需在html元素中添加，要想實現上面效果，也能夠在html代碼中先後各添加兩個div，可是須要再定位及調節樣式，比較麻煩。

 

原理：

1.代碼中只寫一個div，而後在css樣式中，對該div設置flex佈局，再添加:before,:after，此時能夠寫本身想要的樣式。content設置能夠爲""，如果想要在先後面插入文字，能夠設置content爲相應的文字；

2.對該元素（div）設置flex，則能夠看到添加的before、after樣式。