A Pen by Sebastian

This awesome code was written by basti007, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright basti007 ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>A Pen by  Sebastian</title>
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">



       <div class="rating">
       <div s="5" t="Great!"></div>
       <div s="4" t="Good!" ></div>
       <div s="3" t="Middling!"></div>
       <div s="2" t="Weak!"></div>
       <div s="1" t="Uh..."></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>


    <script  src="js/index.js"></script>



/*Downloaded from https://www.codeseek.co/basti007/a-pen-by-sebastian-eRRxNW */
.rating {
  width: 180px;
  padding: 30px 50px 30px;
  display: flex;
  flex-direction: row-reverse;
  margin: 0px auto;
  border-radius: 5px;

/*---- Star ----*/
.star::before {
  font-size: 25px;
  font-family: FontAwesome;
  content: "\f005";
  padding: 0 7px;
  text-shadow: 0px 0px 2px grey;
  cursor: pointer;
  transition: 0.3s;

.gold {
background: white;
    height: 40px;
    width: 185px;
    white-space: nowrap;
    margin-bottom: 4px;
    background-color: #fff;
    padding: 0 16px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 40px;
    box-shadow: 0 1px 1px #cfcac4;

/*---- Star animations ----*/
.gold .star:hover {
  color: gold; 
  position: relative;
.star:hover {
  color: #e91e1e; 
  position: relative;

.gold .star:hover ~ .star {
    color: gold;
.star:hover ~ .star {
  color: #e91e1e;

.gold .selected ~ .star,
.gold .selected {
  color: gold;
.selected ~ .star,
.selected {
  color: #e91e1e;

.star:after {
  position: absolute;
  padding: 7px 15px;
  left: -10%;
  top: 150%;
  font-family: sans-serif;
  font-size: 12px;
  color: white;
  white-space: nowrap;
  z-index: 1000;
  content: attr(t);
  background: #000;
  line-height: 10px;

/*Downloaded from https://www.codeseek.co/basti007/a-pen-by-sebastian-eRRxNW */
$('.rating div').addClass('star');

// When star is clicked
  // if star doesn't have class selected
  if (this+":not(.selected)"){
    // selected star gets class

    // selected star id
    var starId = $(this).attr('s');
    console.log('Selected star:'+starId);