CSS Transitions with :Before and :After Pseudo Elements

Using CSS transition on ::before pseudo element

On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this

.posts .img-hover:before {
    content: '';
    display: block;
    background: url("img/Texture1.png");
    width: 320px; /* image width */
    height: 220px; /* image height */
    position: absolute;
    top: 13px;
    right: 2px;
    opacity: 0;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition:  opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
    opacity: 1;
}

CSS Transitions with :before and :after pseudo elements

Fixed in Google Chrome on January 3rd, 2013.

By now (I do update this list) it's supported in:

• FireFox 4.0 and above
• Chrome 26 and above
• IE 10 and above

Waiting for Safari and Chrome for Android to pull these updates.

You can test it yourself in your browser, or

See the browser support table.

CSS3 Transition on pseudo element (::before) does not work

The problem is that the pseudo-element doesn't exist when the container isn't being hovered:

.flexContainerBox:hover::before { 
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -moz-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 0%);
}

You should move some of these styles to the .flexContainerBox::before styles (where you have the transition styles):

.flexContainerBox::before {
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -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;
}

To not animate the centering of the arrow (translate(-50%, ...)), you can add this:

-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

Also, there's a small typo:

transform: translate(-50%, 0%);

becomes

transform: translate(-50%, 100%);

Result

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

Animate the CSS transition property within :after/:before pseudo-classes

Your fiddle does work for me in Firefox. And as far as I know, and if this article is up to date this is the only browser that can animate pseudo-elements.

---

EDIT: As of 2016, the link to article is broken and the relevant WebKit bug was fixed 4 years ago. Read on to see other answers, this one is obsolete.

:before and :after pseudo elements to receive transition effect

What about an easier way with only one element to create the shape:

div {

  float: left;

  margin: 20px;

  transition: .5s;

}

.testClass {

  margin-top: 0px;

  margin-left: 0px;

  padding: 5px 10px;

  display: block;

  background: #fff;

  position: relative;

  transition: .5s;

  z-index: 0;

}

.testClass:before {

  content: '';

  position: absolute;

  z-index: -1;

  top: 0;

  left: -10px;

  right: -10px;

  bottom: 0;

  opacity: 0;

  background: gold;

  transform: skew(-20deg);

  transition: .5s;

}

.testClass:hover::before {

  opacity: 1;

}

<div>

  <div class="testClass">HOME</div>

  <div class="testClass">ABOUT US</div>

  <div class="testClass">CONTACT</div>

  <div class="testClass">LOGIN</div>

  <div class="testClass">SERVICES</div>

</div>

CSS Transition on the 'content' property of :before pseudo element

You can't apply transition to pseudo elements content property's content itself. You can apply transition to a pseudo element's opacity, width, height, its content's font-size and many more properties... but not the content property's content.

---

Related Topics