内容阻止文本之前和之后的Css

Question

我正在设计一个带有文字的八边形。但不知何故，文字没有显示出来。请帮忙！

HTML

<div class = "octagon">This is some text</div>

CSS

.octagon 
{ 
    width: 134px; 
    height: 100px;
    background: #40174F;
    position: relative;
    color:white;
 } 
.octagon::before
 {
 content: "";
 position: absolute;
 top: 0; 
 left: 0; 
 border-bottom: 25px solid #40174F;
 border-left: 25px solid #fff; 
 border-right: 25px solid #fff;
 width: 84px; 
 height: 0; 
 color:white;

 } 
 .octagon::after
 {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0; border-top: 25px solid #40174F; border-left: 25px solid #fff; border-right: 25px solid #fff; width: 84px; height: 0; 
 color:white;
 }  

div中的文字没有显示。

Answer 1

在.octagon类中添加line-height和text-align

.octagon {
    width: 134px;
    height: 100px;
    background: #40174F;
    position: relative;
    color: white;
    line-height: 6;
    text-align: center;
}