How to vertically align pseudo elements?

Question

I have a before and after pseudo element for articleSubTitle. I am running into an issue when I have a small container or on mobile devices where the text from articleSubTitle falls to a new line. What this is causing is the after element to fall right after the last word (see snippet).

What I am wanting is for the articleSubTitle to be a whole element and the before and after elements to be placed always in the middle of it, despite how long it may be. I'd post an image, but the uploader keeps failing to upload it.

I have tried making articleSubTitle display:block and display:inline-block. Neither of these attempts has helped.

Does anyone know how I can accomplish this?

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class="container">
  <h4 class="articleSubTitle center">From the company A & the company B</h4>
</div>

Stickers · Accepted Answer · 2018-08-07T16:05:59.080

Use flexbox:

.articleSubTitle {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.container {
  background: silver;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
}

.articleSubTitle {
  display: flex;
  justify-content: center;  /* center horizontally */
  align-items: center;      /* center vertically */
  text-align: center;       /* center text inside */
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class="container" style="max-width: 400px; margin: 0 auto;">
  <h4 class="articleSubTitle">From the company A &amp; the company B</h4>
</div>

<div class="container">
  <h4 class="articleSubTitle">From the company A &amp; the company B</h4>
</div>

Temani Afif · Answer 2 · 2018-08-07T15:42:54.720

A solution is to make the element a flexbox container:

.container {
  width: 70%;
  background: gray;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  display: flex; /*added this*/
  align-items:center; /*added this*/
  justify-content:center; /*added this*/
}

.articleSubTitle:before,
.articleSubTitle:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 1px;
  background: #2f2f2f;
}

.articleSubTitle:before {
  margin-right: 10px;
}

.articleSubTitle:after {
  margin-left: 10px;
}

<div class="container">
  <h4 class="articleSubTitle center">From the company A & the company B</h4>
</div>

Or use padding and rely on gradient to create the lines:

.container {
  width: 70%;
  background: gray;
  text-align:center;
}

.articleSubTitle {
  font-family: 'Nunito', sans-serif;
  font-size: 1.3rem;
  color: #4d4d4d;
  padding:0 80px;
  margin:0;
  display:inline-block;
  background:
   linear-gradient(#2f2f2f,#2f2f2f) left center,
   linear-gradient(#2f2f2f,#2f2f2f) right center;
  background-size:70px 1px;
  background-repeat:no-repeat;
}

<div class="container">
  <h4 class="articleSubTitle center">From the company A & the company B</h4>
</div>

How to vertically align pseudo elements?

2 Answers2