Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rating with float right or direction rtl properties
/**
* Rating with float right or direction rtl properties
*/
h1 {
text-align: center;
font-family: Helvetica, Arial;
font-weight: normal;
color: #777;
font-size: 1.3em;
clear: both;
}
div + h1 {
padding-top: 4em;
}
.rating {
width: 245px;
margin: 0 auto 1em;
font-size: 3em;
}
.rating a {
float:right;
color: #aaa;
text-decoration: none;
transition: color .4s;
}
.rating a:hover,
.rating a:hover ~ a {
color: orange;
cursor: pointer;
}
.rating2 {
direction: rtl;
}
.rating2 a {
float:none
}
<h1>Rating with float:right; and general siblings selector</h1>
<div class="rating">
<a href="#5" title="Give 5 stars"></a><a href="#4" title="Give 4 stars"></a><a href="#3" title="Give 3 stars"></a><a href="#2" title="Give 2 stars"></a><a href="#1" title="Give 1 star"></a>
</div>
<h1>Rating with direction:rtl and general siblings selector</h1>
<div class="rating rating2">
<a href="#5" title="Give 5 stars"></a><a href="#4" title="Give 4 stars"></a><a href="#3" title="Give 3 stars"></a><a href="#2" title="Give 2 stars"></a><a href="#1" title="Give 1 star"></a>
</div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.