始终将伪元素水平放置在中间

Question

如何始终将伪元素水平放置在中间？我用百分比值绝对定位它，我认为这是相对于元素宽度的，但在不同的屏幕尺寸上，圆形 "OR" 并不始终位于中间...

见下文：

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.cc-content-1:after {
    content: 'OR';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 90%;
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
}

<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>

如果您调整 window 的大小，您会看到圆圈稍微偏离中心，我如何始终将其保持在绝对位置的中心？是不是不是百分比？我尝试使用 flex，因为它位于 flex 容器中，但似乎没有任何作用。

如何水平居中绝对位置 :after 元素？

Answer 1

您可以 left: calc(100% - 30px) 而不是 left: 90%。

30px是伪元素宽度的一半

Answer 2

首先，我会将 "or" 放在 HTML 中，这样屏幕阅读器就能正确地大声朗读出来。然后你可以相对于整个容器定位该元素，百分比是。你用 left: 50% 把它精确地移到中间，然后用 transform: translateX(-50%) 把它的一半宽度移回左边（这样你就不必知道 "or" 元素有多宽） .

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
    position: relative;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.or {
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
    text-transform: uppercase;
}

<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="or">or</div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>

Answer 3

与@mgrsskls 非常相似，但使用实际的 :after 元素。使用absolute，然后添加left和等于半角的负边距是一个老技巧。但是在您的情况下，还需要考虑额外的保证金。

.content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
}

.cc-content {
    width: 50%;
    padding: 5px 20px;
    position: relative;
    background-color: red;
}

.cc-content-1 {
  margin-right: 3px;
}

.cc-content-2 {
  margin-left: 3px;
}

.cc-content-1:after {
    content: 'OR';
    display: inline-block;
    position: absolute;
    vertical-align: middle;
    line-height: 60px;
    top: 20px;
    left: 100%;
    margin-left: -27px;
    z-index: 1;
    font-size: 21px;
    font-weight: bold;
    border-radius: 100%;
    width: 60px;
    height: 60px;
    background-color: #F2F2F2;
    color: #006AAD;
}

<div class="content">
      <div class="cc-content cc-content-1">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
      <div class="cc-content cc-content-2">
        <h3>Header Here</h3>
        <p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
      </div>
</div>

始终将伪元素水平放置在中间

always keep pseudo element horizontally in the middle

html

css

pseudo-element