分配：之前和之后内容没有响应

Question

我有一个标题需要在其中有一个问候div。而div必须用：before和：after。我无法通过HTML添加它。但是当你调整窗口大小时，一切都搞砸了。而且我不知道如何在不改变字体大小的情况下阻止它发生。

有人可以看看，告诉我是否有我可以做的事情？谢谢！

＆＃13;

＆＃13;

.header {
  background-image: url('http://lorempixel.com/1300/800/');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 765px;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 0px 20px 7px 20px;
  border: 1px solid #fff;
  outline: 2px solid #000;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
  font-size: 3em;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.title:before {
  font-family: FontAwesome;
  content: "\f051";
  font-size: 1.5em;
  vertical-align: bottom;
}

.title:after {
  content: "Hello hello";
  position: absolute;
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  display: block;
  top: 15px;
  left: 75px;
  line-height: 1;
}

＆＃13;

<div class="header">
  <div class="title">
    Hello
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以尝试这段代码，删除绝对位置：

＆＃13;

＆＃13;

data

＆＃13;

.header {
  background-image: url('http://lorempixel.com/1300/800/');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 765px;
  text-align:center;
}

.title {
  position: relative;
  display:inline-block;
  margin-top:15%;
  padding: 0px 20px 7px 20px;
  border: 1px solid #fff;
  outline: 2px solid #000;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375);
  font-size: 3em;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.title:before {
  font-family: FontAwesome;
  content: "\f051";
  font-size: 1.5em;
  vertical-align: bottom;
}

.title:after {
  content: "Hello hello";
  position: absolute;
  font-size: 17px;
  font-weight: 400;
  text-transform: uppercase;
  display: block;
  top: 15px;
  left: 75px;
  line-height: 1;
}

＆＃13;

＆＃13;

＆＃13;