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);
}
&lt;ul&gt;
  &lt;li class="item"&gt;
    &lt;div class="point"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Alpha&lt;/div&gt;
  &lt;/li&gt;

  &lt;li class="item"&gt;
    &lt;div class="point"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Beta&lt;/div&gt;
  &lt;/li&gt;

  &lt;li class="item"&gt;
    &lt;div class="point"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Gamma&lt;/div&gt;
  &lt;/li&gt;

  &lt;li class="item"&gt;
    &lt;div class="point"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Delta&lt;/div&gt;
  &lt;/li&gt;

  &lt;li class="item"&gt;
    &lt;div class="point"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;Epsilon&lt;/div&gt;
  &lt;/li&gt;
&lt;/ul&gt;
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 &gt; li.
The &lt;div class="text"&gt; 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 &gt; li
replace .point with ul.animated-list &gt; li::before


The sudden use of :first-child instead of .point seems strange. Use ul.animated-list &gt; li::before here too, thus ul.animated-list &gt; 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 &gt; 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