如何显示与父元素内联的 :after 内容？

Question

我在一个元素下面创建了一个 :after 行。我想弄清楚如何将 content: 'or' 放在行的中间。现在我只能在背景线下得到content: 'or'。

有谁知道我该怎么做吗？

.expanded-info {
  display: block;
  margin: 8px auto;
  text-align: center;
}
#expanded-phone:after {
  width: 40%;
  margin: 20px auto 20px auto;
  display: block;
  content: 'or';
  height: 3px;
  background: #ccc;
}

<span class="expanded-info" id="expanded-phone">Give us a call</span>

Answer 1

你可以这样做

.expanded-info {    
    display: block;
    margin: 8px auto; 
    text-align: center; 
    position: relative;
} 

#expanded-phone:after { 
    width: 40%;     
    margin: 20px auto 20px auto; 
    display: block;
    content: 'or';  
    height: 3px; 
    background: #ccc; 
    position:absolute;
    right:0;
    top:10px
}

<span class="expanded-info" id="expanded-phone">Give us a call</span>

Answer 2

1) 相同伪元素的内容和背景

尽量减少line-height的内容。
您可以使用任何字体属性来设置伪元素的样式。
您可以简化 margin 属性。 20px auto 20px auto 等同于 20px auto.

请检查结果。这是你想要达到的目标吗？

.expanded-info {
  display: block;
  margin: 8px auto;
  text-align: center;
}
#expanded-phone:after {
  width: 40%;
  margin: 20px auto; /* 3. */
  display: block;
  content: 'or';
  height: 3px;
  background: #ccc;
  line-height: 2px; /* 1. */
}

<span class="expanded-info" id="expanded-phone">Give us a call</span>

2) 一个单独的 class 将文本设计为拆分器

我更喜欢用 HTML 写文字内容，而不是 CSS。所以我喜欢为每种类型的内容创建特殊的 classes。

例如：https://codepen.io/glebkema/pen/OmZYZL

.on-the-line {
  font-size: 21px;
  font-family: 'Open Sans';
  margin: 18px 0;
  text-align: center;
}
.on-the-line:after,
.on-the-line:before {
  border-top: solid 3px grey;
  content: '';
  display: inline-block;
  margin: 0 18px 3px;
  width: 18%;
}
.on-the-line.orange {
  color: orange;
}
.on-the-line.orange:after,
.on-the-line.orange:before { 
  border-color: orange;
}
.on-the-line.dotted:after,
.on-the-line.dotted:before { 
  border-top-style: dotted;
}

<div class="on-the-line">or</div>
<div class="on-the-line orange">and</div>
<div class="on-the-line orange dotted">something else</div>

如何显示与父元素内联的 :after 内容？

How do I display the :after content inline with the parent element?

css

after-effects

1) 相同伪元素的内容和背景

2) 一个单独的 class 将文本设计为拆分器