---
title: "CSS width transition not working at all"  
description: "CSS width transition not working at all"  
author: "marcel ethan"  
published: 2013-09-25  
updated: 2013-09-25  
canonical: https://www.mindstick.com/forum/1534/css-width-transition-not-working-at-all  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 1 minute  

---

# CSS width transition not working at all

Hi I'm [trying](https://answers.mindstick.com/qa/93698/6-mistakes-couples-are-trying-to-save-money) to animate the width of the span inside the a of this nav

<nav [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp)="navigator">

<ul>

<li><a href="#home">H<span>home</span></a></li>

<li><a [title](https://www.mindstick.com/articles/12860/how-to-get-financing-for-salvage-title-cars)="What?" href="#what">W<span>what</span></a></li>

<li><a title="Porfolio" href="#works">P<span>works</span></a></li>

<li><a title="Who?" href="#who">W<span>who</span></a></li>

<li><a title="Where?" href="#where">W<span>where</span></a></li>

</ul>

</nav>

here it is the CSS

[header](https://www.mindstick.com/articles/336036/explain-about-html-header-body-and-footer-tags) nav ul li a{

position: [relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css);

width: 40px;

display: block;

text-decoration: none;

font-size: 18px;

[color](https://www.mindstick.com/articles/77/how-to-split-form-background-color-in-c-sharp): #000;

}

header nav ul li a:hover span{

width: auto;

[overflow](https://www.mindstick.com/interview/1711/what-is-overflow-properties-in-css): visible;

text-align: right;

}

header nav ul li a span{

position: [absolute](https://www.mindstick.com/interview/1159/what-is-absolute-and-sliding-expiration-in-dot-net);

width: 0;

right: 45px;

overflow: [hidden](https://www.mindstick.com/forum/2303/skip-validating-field-from-hidden-div);

[transition](https://answers.mindstick.com/qa/94090/a-material-is-dimensionally-stable-at-room-temperature-if-its-glass-transition-temperature-tg-is):width 0.25s;

-webkit-transition:width .25s;

-moz-transition: width 0.25s;

font-size: 16px;

}

## Replies

### Reply by Pravesh Singh

Hi Marcel,

Try this:

```
header nav ul li a:hover{}header nav ul li a:hover span{    width: 100%; /*
YOU'LL NEED TO ADJUST THIS, IT CANNOT BE AUTO*/    overflow: visible;    text-align: right;}header nav ul li a span{    position:
absolute;    width: 0;    right: 45px;    overflow: hidden;    transition:width
0.25s;   
-webkit-transition:width .25s;    -moz-transition: width 0.25s;    font-size: 16px;    display:block;
/*HERE IS MY OTHER CHANGE*/}
```


---

Original Source: https://www.mindstick.com/forum/1534/css-width-transition-not-working-at-all

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.