Css3 Transitions on Pseudo-Elements (:After, :Before) Not Working

.flexContainer {  display: flex;  flex-direction: row;}
.flexContainerBox {  flex: 1;  border-top: 20px solid transparent;  position: relative;  padding: 50px;  font-family: "Open Sans Bold";}
.flexContainerBoxBorderRight {  border-right: 1px solid #ccc;  position: absolute;  top: 10%;  bottom: 10%;  right: 0;}
.flexContainerBox1 {  border-top-color: #15AF04;  color: #15AF04}
.flexContainerBox2 {  border-top-color: #ffd470;  color: #ffd470;}
.flexContainerBox3 {  border-top-color: #1b63b1;  color: #1b63b1;}
.flexContainerBox4 {  border-top-color: #dd0000;  color: #dd0000;}
.flexContainerBox::before {  content: '';  position: absolute;  border: 15px solid transparent;  border-bottom: 0;  position: absolute;  left: 50%;  top: 0;  -moz-transform: translateX(-50%);  -ms-transform: translateX(-50%);  -webkit-transform: translateX(-50%);  transform: translateX(-50%);  -webkit-transition: all 1.5s ease-in-out;  -moz-transition: all 1.5s ease-in-out;  -ms-transition: all 1.5s ease-in-out;  -o-transition: all 1.5s ease-in-out;  transition: all 1.5s ease-in-out;}
.flexContainerBox:hover::before {  -moz-transform: translate(-50%, 100%);  -ms-transform: translate(-50%, 100%);  -webkit-transform: translate(-50%, 100%);  transform: translate(-50%, 100%);}
.flexContainerBox1:hover::before {  border-top-color: #15AF04;}
.flexContainerBox2:hover::before {  border-top-color: #ffd470;}
.flexContainerBox3:hover::before {  border-top-color: #1b63b1;}
.flexContainerBox4:hover::before {  border-top-color: #dd0000;}

<div class="indexContainer whiteContainer flexContainer">  <div class="flexContainerBox flexContainerBox1">    <div class="flexContainerBoxBorderRight"></div>    <div class="flexContainerBoxHeading">      WORLD CLASS <span style="color:#111">FACILITIES</span>    </div>    <div class="flexContainerBoxTextBox">      <ul>        <li>Day & Boarding</li>        <li>Secondary & Primary</li>        <li>Ages 2 to 18</li>        <li>200 Students </li>        <li>Cambridge IGCSE & GCEs</li>        <li>Beautiful sports facilities</li>      </ul>    </div>  </div>  <div class="flexContainerBox flexContainerBox2">    <div class="flexContainerBoxBorderRight"></div>    <div class="flexContainerBoxHeading">      QUALITY <span style="color:#111">EDUCATION</span>    </div>    <div class="flexContainerBoxTextBox">      <ul>        <li>Over 10 Years Experience in Quality delivery</li>        <li>Good resources for Students</li>        <li>Student Oriented Learning</li>        <li>Good Teaching staff </li>        <li>Conducive Environment</li>      </ul>    </div>  </div>  <div class="flexContainerBox flexContainerBox3">    <div class="flexContainerBoxBorderRight"></div>    <div class="flexContainerBoxHeading">      PERSONAL <span style="color:#111">TOUCH</span>    </div>    <div class="flexContainerBoxTextBox">      <ul>        <li>Small Class Sizes</li>        <li>Low teacher:student Ratio</li>        <li>Maximum contact with teachers</li>        <li>Mentorship programs</li>        <li>Student Counselling</li>      </ul>    </div>  </div>  <div class="flexContainerBox flexContainerBox4">    <div class="flexContainerBoxBorderRight"></div>    <div class="flexContainerBoxHeading">      HOLISTIC <span style="color:#111">APPROACH</span>    </div>    <div class="flexContainerBoxTextBox">      <ul>        <li>Innovative Teaching Methods</li>        <li>Use of Technology in learning</li>        <li>Developing the "whole" child</li>        <li>Nurturing Talents & Gifts</li>        <li>Extra-curricular program</li>        <li>Christ-Centered School</li>      </ul>    </div>  </div>  <div class="clear"></div></div>

CSS3 transitions on pseudo-elements (:after, :before) not working?

WebKit (Chrome, Safari) does not support transitions on pseudo elements.

• https://bugs.webkit.org/show_bug.cgi?id=23209
• http://code.google.com/p/chromium/issues/detail?id=54699

It should work in Firefox.

Edit: The issue in WebKit is now resolved. The patch allready landed in Chrome Carnery, so it will be supportet from version 26 on. I don't know about Safari.

Put animation on pseudo-elements with content

I got i fixed!

I but all the styling (display, width, height etc...) in the span:before, span:after part, instead of in the :hover part. Then it all worked perfect!

You can see the fiddle in the bottom of this post.

span:before, span:after {
   content: attr(data-title);
   display: block;
   position: absolute;
   width: 100px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #FFF;
   background: rgba(0,0,0,0.75);
   border-radius: 3px;
   left: -20px;
   top: 46px;
   opacity: 0;
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   -o-transition: all .2s;
   -ms-transition: all .2s;
   transition: all .2s;
}

span:hover:after {
   opacity: 1;
}

I also added a pointer-events: none; so you can't make the tooltip appear when hovering it, when it has opacity: 0;

Here's the js Fiddle

CSS3 transition of :after pseudoelements wait to main item transition end

It seems if you set the specific transition values for each of the elements (instead of using all) it behaves as you are intending in Chrome. I tested Firefox and it still works fine there as well.

a {
  font-size: 50px;
  font-weight: 800;
  color: red;
  text-decoration: none;
  transition: color 1s linear 0s; /*set color only*/
}

a:hover {
  color: blue;
}

a::before {
  content: "\0005B";
  margin-right: 30px;
  transition: margin 1s linear 0s; /*set margin only*/
 }

a::after {
  content: "\0005D";
  margin-left: 30px;
  transition: margin 1s linear 0s; /*set margin only*/
}

I have updated your js.fiddle here. Hope that helps.

Add transition to hover after pseudo

It's hard to reproduce from your code but there's a few main problems:

• Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.

• It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.

• You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.

And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:

.container {
  position: relative;
  padding:10px;
  font-family:'Arial';
  border:1px solid black;
}

.container .tooltip {
  opacity: 0;
  transition: opacity 0.4s ease-out;
  position: absolute;
  top: 100%;
  left: 0;
  height: 20px;
  padding:10px;
  font-size: 13px;
}

.container .primary:hover .tooltip {
  opacity: 1;

}

<div class="container">
  <div class="primary">div
  <div class="tooltip">"Go through a list of friends to remove"</div>
  </div>
</div>

ul.sub-menu > li > a:before {
    display: none!important;
}