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

Question

I created an :after line below an element. I am trying to figure out how I can place the content: 'or' in the middle of the line. Right now I can just get the content: 'or' under the background line.

Anyone know how I can accomplish this?

.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

1) The content and background of the same pseudo-element

1. Try to decrease the line-height of the content.
2. You can use any font properties to style your pseudo-elements.
3. You can simplify the margin property. 20px auto 20px auto is equivalent to 20px auto.

Please check the result. Is it what you want to achieve?

.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) A separate class to design the text as a splitter

I prefer to write text content in HTML, not in CSS. So I like to create special classes for each type of content.

For example: 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>