title: transition-delay for pseudo-element
body: <p>As you see in code below I used pseudo element <code>after</code> to get triangle shape for the menu item.    </p>
  
  <p>But the triangle don't response to transition at all. </p>
  
  <p>Any idea? </p>
  
  <p>( I am new to css and this site, so forgive me for any mistakes you may find here.)</p>
  
  <p>(For live preview you can find it at the bottom of the this question.)</p>
  
  <p>html:</p>
  
  <pre><code>&lt;ul class="breadcrumb"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Vehicles&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Vans&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Camper Vans&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.breadcrumb { 
      list-style: none; 
      overflow: hidden; 
      font: 18px Helvetica, Arial, Sans-Serif;
  }
  
  .breadcrumb li { 
      float: left;
  }
  
  .breadcrumb li a {
      color: white;
      text-decoration: none; 
      padding: 10px 0 10px 65px;
      background: brown;                   /* fallback color */
      background: hsla(34,85%,35%,1); 
      position: relative; 
      display: block;
      float: left;
  }
  
  .breadcrumb li a:after { 
      content: " "; 
      display: block; 
      width: 0; 
      height: 0;
      border-top: 50px solid transparent;           /* Go big on the size, and let overflow hide */
      border-bottom: 50px solid transparent;
      border-left: 30px solid hsla(34,85%,35%,1);
      position: absolute;
      top: 50%;
      margin-top: -50px; 
      left: 100%;
      z-index: 2; 
  }
  
  
  
  .breadcrumb li:first-child a {
      padding-left: 10px;
  }
  .breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,45%,1); }
  .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
  .breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,55%,1); }
  .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
  .breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,65%,1); }
  .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
  .breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,75%,1); }
  .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
  
  
  
  .breadcrumb li a:hover { background: hsla(34,85%,25%,1); transition-delay:.3s; }
  .breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; transition: border-color 0.3s ; }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/DarkAge/espz84tb/9/" rel="nofollow">live preview here</a></strong></p>
  
  <p>Credit: This menu taken from lesson on css-tricks.com with some editing.</p>