如何在内容与父元素内联后显示：

Question

我在元素下面创建了一个:after行。我试图弄清楚如何将content: 'or'置于中间位置。现在我可以在背景线下得到content: 'or'。

任何人都知道如何做到这一点？

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

1. 尝试减少内容的line-height。
2. 您可以使用任何字体属性来设置伪元素的样式。
3. 您可以简化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）将文本设计为拆分器的单独类

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

例如：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>

Answer 2

你可以做这样的事情

    .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
}