Vertically Aligning CSS :Before and :After Content

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

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.

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>

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/

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

css before and after line's vertical aligning

Use vertical-align: middle; on the pseudo element:

.our-service-title{
    color: #222222;
    font-size: 24px;
    font-weight: 600;
}

.our-service-title:before, .our-service-title:after{
    content:" ";
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
    width: 30px;
    height: 3px;
    background-color: #FFC000;
}

<div class="content-fluid">
    <div class="row d-flex justify-content-center m-0">
        <div class="our-service-head">
            <p class="our-service-title text-center">Our Services</p>
        </div>
    </div>
</div>

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

How to align pseudo element :before :after and span element

Just give vertical-align: middle; to .x-btn-inner::before to make it align proper.

.x-box-item {  border: 1px solid black;  width: 300px;  height: 50px;  position: absolute;  right: auto;  left: 0px;  margin: 0px;}.x-btn-wrap {  width: 100%;  height: 100%;  display: table;}.x-btn-button {  text-align: center;  vertical-align: middle;  display: table-cell;  white-space: nowrap;}.x-btn-inner {  display: inline-block;  vertical-align: middle;  max-width: 100%;}.x-btn-inner:before {  content: '';  width: 50px;  height: 50px;  background-image: url("https://gradschool.uoregon.edu/sites/gradschool1.uoregon.edu/files/facebook-like-icon-small.png");  display: inline-block;  background-size: 50px 50px;  vertical-align:middle;}

<a class="x-box-item" onClick="alert('Hello World!')">  <span class="x-btn-wrap">    <span class="x-btn-button">      <span class="x-btn-inner">      LIKE      </span>  </span>  </span></a>

---

Related Topics