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

Question

I am trying to style a border with a pseudo element. I have a div and this div has a top border. I want the border to have a little arrow when I hover over the div. I have been able to achieve this, but What I want is for the little arrow to SLIDE DOWN SLOWLY when I hover over the div. I have tried to add some transitions but the transitions seem not to work on the ::before elements. I've looked at all the questions on Stackoverflow asking a similar thing, but none of the solutions seem to be able to solve my problem

Here's the code.

HTML

 <div class="flexContainer">
        <div class="flexContainerBox flexContainerBox1">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox2">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox3">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox4">
            <div class="flexContainerBoxBorderRight"></div>

        </div> 
        <div class="clear"></div>
    </div>

and the CSS

     .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{
        -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 { 
        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%);
        }
     .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;
    } 

Any solution, even a JQUERY or Pure JS solution will be appreciated.

Answer 1

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>

Answer 2

Remove hover from this css .flexContainerBox:hover::before => .flexContainerBox::before, and animation should work.