html - 内容阻止文本前后的 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;
}