html - 在具有绝对位置的伪元素中垂直对齐

Question

我有一个必须水平居中的“按钮”元素，我用 margin: 0 auto;
但是在那个按钮旁边我默认为空 :after将根据服务器响应包含文本的伪元素。

现在它是这样工作的:

.button {
  cursor: pointer;
  position: relative;
  background: gray;
  width: 200px;
  height: 36px;
  line-height: 36px;
  margin: 0 auto;
  text-align: center;
}
.button:after {
  cursor: default;
  text-align: left;
  content:'response text here';
  position: absolute;
  top: 0;
  right: -180px;
  height: 36px;
  width: 170px;
}

<div>
  <div class="button">click me!</div>
</div>

并且工作正常，但如果该响应文本包含 2 行(这可能会发生)，则第二行将无法垂直对齐，因为 line-height参数。
所以问题是:在这种情况下如何垂直居中响应文本？

如果我做 :after元素 display:table-cell它不会因为 position:absolute 而工作, flexbox 到 .button也会影响按钮文本。我想到的另一个解决方案是 made 2 <dv>连续，但如果是这样我不知道如何定位它们。

Answer 1

你可以在绝对定位的伪元素上将 line-height 重置为 normal 左右，并使用 top: 50% + transform: translateY(-50%) 使其垂直居中。

我还建议使用 left: 100% 而不是 right: -180px，这样它可以使用动态按钮宽度。

.button {
  position: relative;
  background: gray;
  width: 200px;
  height: 36px;
  margin: 10px auto;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}

.button:after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100%;
  margin-left: 10px;
  width: 170px;
  text-align: left;
  line-height: normal;
  cursor: default;
  background: pink;
}

<div>
  <div class="button" data-text="response text here">click me!</div>
  <div class="button" data-text="response text response text here">click me!</div>
</div>