使用before伪元素出现的问题？

Question

before,after会占据元素里边的空间，我一直以为是占据外边的空间。
如果不用nowrap元素就会换行是为什么？
为什么设置inline-block不会包含整个标签了？
怎样让他全部都包含到？
伪元素为什么用不了百分比设置高度，宽度却可以用百分比？
考虑到自适应手机端这样做是不是最好的选择？

<div class="wrap_column column_05">
            <h2 class="til">哈哈哈啊哈哈哈哈哈哈哈哈</h2>
</div>
.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;
}

Answer 1

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

no wrap 翻译过来就是不换行。一个容器宽度不够，自然要换行。强行不换行，自然要超出。

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

这个跟inline-block没有关系，真正的原因是容器宽度不够。为什么设置成block就可以呢？因为block元素默认的宽度是100%。

怎样让他全部都包含到？

让元素变宽

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

高度宽度都可以使用百分比。如果父元素本身没有设置高度，是由子元素撑起来的，使用百分比高度的子元素是不会有正确的高度。但是宽度又可以，我猜测是，宽度的改变只影响本行的渲染与重绘，而高度会导致整个页面渲染与重绘。so...

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

肯定不是好的选择，而且我觉得是一个糟糕的写法。我觉得应该使用非百分比写法设置伪元素的高度与宽度；如果使用百分比的写法，应该给外层的容器设置一个宽和高。

Answer 2

white-space的默认值是normal，而且父元素有具体高度的话，伪元素可以用百分比高度啊，而且你说的那个不能包含全部标签应该是由于white-space引起的而不是display,自己测试下吧。