Unordered list in HTML with animated list points

I had this idea today, but I don't have any practical usage for it right now. Any feedback or improvements welcome.

Code is found at CodePen, and also presented here as a snippet:



ul {
list-style-type: none;
width: 250px;
border: 2px solid #a9a9a9;
border-radius: 16px;
margin: 0 auto;
}

.item {
margin: 10px 0;
}

.point {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 20px;
border-radius: 0 50%;
transform: rotate(0deg);
}

.point:hover {
transform: rotate(-45deg);
}

.text {
display: inline-block;
width: 200px;
color: #121212;
font-family: helvetica;
}

li:nth-of-type(1) div:first-child {
background-color: rgba(30, 30, 30, 1.0);
}

li:nth-of-type(2) div:first-child {
background-color: rgba(60, 60, 60, 1.0);
}

li:nth-of-type(3) div:first-child {
background-color: rgba(90, 90, 90, 1.0);
}

li:nth-of-type(4) div:first-child {
background-color: rgba(120, 120, 120, 1.0);
}

li:nth-of-type(5) div:first-child {
background-color: rgba(150, 150, 150, 1.0);
}



Alpha




Beta




Gamma




Delta




Epsilon



Your HTML is far too overloaded.

• The .point elements are unnecessary and can be replaced by using the pseudo-element ::before. This requires adding the property content: "".

• Generally as a rule, it's wrong to use the same class on all child elements, especially when it's generic like item. Better mark the list itself and use a child selector to select the items, for example .animated-list > li.

• The ` also seem unnecessary for this example. Setting display: inline-block and width have nothing to do with animated bullets and the color and font-family should be assigned on a higher level element such as the body.




In the CSS, as mentioned above



• replace ul with ul.animated-list






• replace .item with ul.animated-list > li






• replace .point with ul.animated-list > li::before




The sudden use of :first-child instead of .point seems strange. Use ul.animated-list > li::before here too, thus ul.animated-list > li:nth-of-type(1)::before.

Finally, I'd expect the the bullets to animate when hovering over the list item not just the bullet itself, so I'd replace .point:hover with ul.animated-list > li:hover::before.

And for some "flair" consider adding transition: transform 0.1s;` to get a smooth animation.

EDIT: Here's my code: http://codepen.io/anon/pen/adoWxp

StackExchange Code Review Q#112554, answer score: 5