Vertically Centering Content of :Before/:After Pseudo-Elements

Vertically centering content of :before/:after pseudo-elements

Assuming your element is not an <img> (because pseudo elements are not allowed on self-closing elements), let's suppose it's a <div>, so a way could be:

div {
    height: 100px ;
    line-height: 100px;
}
div:before, div:after {
    content: "";
    ...
    display: inline-block;
    vertical-align: middle;
    height: ...;
    line-height: normal;
}

If you cannot change the line-height of the div, another way is:

div {
    position: relative;
}
div:before, div:after {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: ...
}

Otherwise, just place the indicators as a background in center position.

Vertically/horizontally centering a pseudo element's generated content

Since pseudo elements are essentially added as children elements, one option is to use a flexbox layout. Add display: flex to the parent element, and then use align-items: center for vertical centering and justify-content: center for horizontal centering.

.block {  height: 150px;  width: 150px;  border: 1px solid black;  display: flex;  align-items: center;  justify-content: center;}.block:after {  content: "content";}

<div class="block"></div>

How to vertically align pseudo elements?

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 & the company B</h4></div>
<div class="container">  <h4 class="articleSubTitle">From the company A & the company B</h4></div>

Vertically aligning CSS :before and :after content

Answered my own question after reading your advice on the vertical-align CSS attribute. Thanks for the tip!

.pdf:before {
    padding: 0 5px 0 0;
    content: url(../img/icon/pdf_small.png);
    vertical-align: -50%;
}

How to vertically (middle position) align pseudo-element 'before' for LI element

Edit I just see that you don't want to use margin. Well I tried :)

This will work as you want it to work, just set display to inline-block and give it a margin-bottom of 6px: http://jsfiddle.net/bayxxey3/8/

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 3px;
    background-color: #000;
    clear: both;
    margin-bottom:6px;
}

CSS how to vertically align text within a pseudo element

Easiest way? Add padding top. Little more difficult but better way, use flexbox.

These properties will do

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;

http://jsfiddle.net/6dqxt2r3/4/

Problem with alignment of pseudo elements

In case you are intrested you can simplify your code without the need of using pseudo element:

.loader-container {  position: absolute;  width: 100%;  height: 100%;  left: 0px;  top: 0px;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  background-color: aquamarine;}
.loader {  border: 2px solid red;  height:102px;  width:150px;  background:    /*circle with a radius of 25px and border 2px blue*/    radial-gradient(circle at center,      transparent 24px,blue 25px,blue 26px,transparent 27px),    /*circle with a radius of 50px and border 2px green*/    radial-gradient(circle at center,      transparent 49px,green 50px,green 51px,transparent 52px);}

<div class="loader-container">  <div class='loader'></div></div>

CSS vertical alignment of :before pseudo element and td content

I found the solution myself...

The problem was in fact the .cshtml razor syntax compilation.

Since those date fields were placed within a c# if-statement I formatted the code like usual:

@if(startDate != DateTime.MinValue)
{
  <td class="ta-left" data-label="Start">@startDate</td>
}

The text identiation and the line breaks for clean code here were the problem.

The razor compiler inserted a break for those parts. The problem could be fixed using the following razor markup:

@if(startDate != DateTime.MinValue){<td class="ta-left" data-label="Start">@startDate</td>}

Pseudo-elements :before and :after vertical position

I'd like to have at the top and the bottom of the <h2>, a thin border.

Like this:

JSFiddle

CSS /* generic h2 */

h2 {
    font-size:1.1em;
    line-height: 20px;
    background-color: #d8713c;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    padding: 20px 10px;
    position:relative;
}

h2::before, h2::after {
    content:"";
    position: absolute;
    left:50%;
    width: 10%; /* anything you like */
    margin-left:-5%; /* 50% of width */
    height: 0px;
    border-bottom: 3px solid #efbe94;
}

h2::before {
      top: 7%;  
}

h2::after {
    bottom: 7%;

}

Vertically Centering Content of :Before/:After Pseudo-Elements