有些網站會用偽元素在標題前後加兩根線，類似這種效果:
－－－－－－　標題　－－－－－－
到底怎麼做呢？

 

demo一樣看上一篇的 DrawGame
 

主要的 code

<div className="titleContainer">
  <h2 className="title">[React] 抽獎小遊戲 陣列渲染實作練習</h2>
</div>

.titleContainer {
  position: relative;
}

.title {
  text-align: center;
}

.title::before,
.title::after {
  position: absolute;
  content: "";
  height: 2px;
  top: 70%;
  background: #666;
  width: calc(50% - 230px);
}

.title::before{
  left: 0;
}

.title::after {
  right: 0;
}

 
 
html 的部分首先你要用一個容器放你要加線的標題，
容器要設 position:relative
標題設 position:absolute ，這樣偽元素出現的位置才能相對於容器。

最後使用 background 來設定線的顏色。

 
我們想要的效果是線大概在中間，基本上會是 top:50% ，
往上或往下調到一個合適的值就放上去，也沒啥好說的。

 

然後是起始位置，
::before 從左邊開始所以 left:0
::after 從右邊開始所以 right:0
 

最後是寬度。

我們會想要跟標題保持一點距離，
但螢幕寬度縮小的時候又不能讓線蓋到字。
所以這邊寬度不能寫死。
用 calc 來計算。

 

怎麼算咧？

可以這樣想，因為是左右兩邊各半，
所以50%，不過你直接放50%肯定會蓋到字，
因為你還沒扣掉標題跟你要留白的寬度。

 

標題寬度固定的情況下，可以直接用開發者工具去指標題得到標題寬度 x ，
因為左右各半，所以 x/2 才是必須扣掉的寬度。

所以最後會是
calc(50% - (x/2)px)

 

這個寬度沒有算留白，所以可以再扣一點，假如想留個20px
那就是
calc(50% - (x/2-20)px)

 

這邊只是一個概念示意，實際上px前面不能是運算式
必須直接寫數字
ex.
width: calc(50% - 230px);

 

另外要留意，calc()裡面，運算符號要跟前後都留一個空白
也就是說你不能像下面這樣寫
width: calc(50%-230px);
 

50%跟230px中間那個-前後必須各有一個空白

大概就是這樣了