html伪元素before占用高度,使用before伪元素出现的问题？

before,after会占据元素里边的空间，我一直以为是占据外边的空间。

如果不用nowrap元素就会换行是为什么？

为什么设置inline-block不会包含整个标签了？

怎样让他全部都包含到？

伪元素为什么用不了百分比设置高度，宽度却可以用百分比？

考虑到自适应手机端这样做是不是最好的选择？

哈哈哈啊哈哈哈哈哈哈哈哈

.column_05,.column_06{

text-align: center;

}

.column_05 .til,.column_06 .til{

display: inline-block;

position: relative;

text-align: center;

font-size: 2.4rem;

color: #16003a;

margin: 20px auto;

line-height: 25px;

text-align: center;

white-space: nowrap;

}

.column_05 .til:before,.column_06 .til:before{

content: "";

display: inline-block;

width: 10%;

height: 20px;

margin-left: 5%;

background: url(../images/title_before.png) no-repeat;

background-size: contain;

}

.column_05 .til:after,.column_06 .til:after{

content: "";

margin-right: 5%;

display: inline-block;

width: 10%;

height: 20px;

background: url(../images/title_after.png) no-repeat;

background-size: contain;

}