SOURCE

<div></div>

div {
    width: 200px;
    height: 30px;
    border: 1px solid red;
    background: greenyellow;
    transition: width .5s ease, background-color .6s ease-in-out;
}
div::after {
    float: right;
    margin-right: 10px;
    content: ">";
    height: 30px;
    line-height: 30px;
}
div:hover {
    width: 250px;
    background: skyblue;
}