Animate the CSS Transition Property Within :After/:Before Pseudo-Classes

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.

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.

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.

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.

Why is there a delay for the transition of my pseudo elements?

I also assigned the default values ​​to ::before and works fine. I think it trying to inherit the default values and it's confusing.

a {  color: blue;  transition: all 1s;  text-decoration: none;}
a:hover {  color: red;  font-size: 48px;}
a::before {  content: 'Link:';  transition: all 1s;  font-size: 1rem;  color: blue;}
a:hover::before {  color: green;  font-size: 32px;}

<a href="javascript: void(0)">Home</a>

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Is it possible to handle mouseout on ::after pseudo-class in CSS?

Don't use animation but transition. An idea using background properties

.header-section {
  width: calc(100% / 4);
  padding: 10px 15px;
  user-select: none;
  font-family: 'Nourd', sans;
  font-size: 1.2em;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
  position: relative;
}

.header-section::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 25%;
  right: 25%;
  height: 4px;
  border-radius: 6px;
  background-image: linear-gradient(135deg, rgb(225, 60, 60), rgb(235, 126, 181));
  background-size: 0% 100%;
  background-position:right;
  background-repeat: no-repeat;
  transition:background-size 0.5s, background-position 0s 0s;
}

.header-section:hover::after {
  background-size: 100% 100%;
  background-position:left;
}

<div class="header-section header-section-selected">importer</div>
<div class="header-section">mes fichiers</div>

---

Related Topics