CODEWITHSUNDEEP
htmlcsspseudo-element
scriptscale
scriptscale

Reputation: 83

How to add two stars in CSS through :after?

I need to add two stars icons without using any image or font awesome. I need to add them in CSS through :after, is this possible?

I want it to look like this:

Need Two Stars on the Button

Currently it looks like this:

enter image description here 

a {
  width: 247px;
  height: 59px;
  float: none;
  margin: 100px auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #555555;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 59px; /* http://colorzilla.com/gradient-editor/#e3e3e3+0,d2d2d2+50,c6c6c6+51,adadad+100 */
  background: #e3e3e3; /* Old browsers */
  background: -moz-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#adadad', GradientType=0); /* IE6-9 */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 3px 1px #777777;
  box-shadow: 0 1px 3px 1px #777777;
  text-shadow: 0 1px 0 #dedede;
  position: relative;
  display: block;
}

a:before {
  width: 261px;
  height: 73px;
  position: absolute;
  top: -9px;
  left: -10px;
  background: #cbcbcb;
  content: "";
  border: #fff 2px solid;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 0 2px #666666;
  box-shadow: 0 0 0 2px #666666;
  z-index: -1;
}

a:after {
  width: 247px;
  height: 59px;
  position: absolute;
  top: -9px;
  left: -9px;
  background: none;
  content: "";
  z-index: 1;
}
<a href="#">Checkout</a>

Upvotes: 2

Views: 5914

Answers (4)

Y.K.
Y.K.

Reputation: 310

For anyone looking for Pure CSS stars, because the original poster stated they didn't want to use fontawesome or images, here's the code : 

<!doctype html>
<html>
<head>
    <title>Untitled</title>
    <style>
.starCont{
    display:inline-block;
    position: relative;
}

.tri-1 {
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 8px solid #f8f800;
}
.tri-2 {
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 7px solid transparent;
border-left: 5px solid #f8f800;
transform: rotate(16deg);
position: absolute;
top: -17px;
left: -3px;
}
.tri-3 {
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 7px solid transparent;
border-right: 5px solid #f8f800;
transform: rotate(-16deg);
position: absolute;
top: -17px;
left: -2px;
}
    </style>
</head>

<body>

<div class="starCont">
<div class="tri-1"><div class="tri-2"></div><div class="tri-3"></div></div>
</div> Star Rating


</body>
</html>

Use the -webkit and -mz prefixes for the transform properties to have the star rendered in older browsers. Otherwise, it's a world first, because after searching for a while, I couldn't find any stars using Pure CSS. I should credit the CSS-Tricks website, which posted the triangles, which gave me the idea for overlapping 3 triangles, then rotating 2 of them, to create a star.

Upvotes: 0

Stickers
Stickers

Reputation: 78706

One possible solution is to use white-space: pre;, so that you can attach two stars and display each one at each side of the button with just :after as you asked.

a:after {
  ...
  content: "✭                        ✭";
  white-space: pre;
}


a {
  position: relative;
  display: block;
  width: 247px;
  height: 59px;
  margin: 100px auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #555555;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 59px;
  background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  border-radius: 8px;
  box-shadow: 0 1px 3px 1px #666;
  text-shadow: 0 1px 0 #dedede;
}

a:before {
  position: absolute;
  z-index: -1;
  top: -9px;
  left: -9px;
  width: 261px;
  height: 73px;
  content: "";
  border: #fff 2px solid;
  border-radius: 15px;
  background: #cbcbcb;
  box-shadow: 0 0 0 2px #666;
}

a:after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 247px;
  height: 59px;
  content: "✭                        ✭";  /* \2605 */
  white-space: pre;
}
<a href="#">Checkout</a>

One other way is to put all relevant styles into one place, so that you'll have both :before and :after free to use for the stars, and control the position of each one individually.

a {
  ...
  box-shadow: 0 1px 3px 1px #666, 0 0 0 7px #ccc, 0 0 0 9px #fff, 0 0 0 11px #666;
}
a:before, a:after {
  content: "✭";
}
a:before {
  margin-right: 12px
}
a:after {
  margin-left: 12px;
}


a {
  position: relative;
  display: block;
  width: 247px;
  height: 59px;
  margin: 100px auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  color: #555555;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 59px;
  background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  border-radius: 6px;
  box-shadow: 0 1px 3px 1px #666, 0 0 0 7px #ccc, 0 0 0 9px #fff, 0 0 0 11px #666;
  text-shadow: 0 1px 0 #dedede;
}

a:before,
a:after {
  content: "✭"; /* \2605 */
}

a:before {
  margin-right: 12px
}

a:after {
  margin-left: 12px;
}
<a href="#">Checkout</a>

Upvotes: 4

Rahul
Rahul

Reputation: 2071

I edit your CSS code Please check carefully.

body {
  margin: 0;
  padding: 0;
  text-align: center;
}
a {
  width: 247px; height:59px; float:none; margin:100px auto; font-family:Arial, Helvetica, sans-serif; font-size:25px; font-weight:bold; color:#555555; text-align:center; text-transform:uppercase; text-decoration:none; line-height:59px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3e3e3+0,d2d2d2+50,c6c6c6+51,adadad+100 *
  background: #e3e3e3;
  /* Old browsers */
  background: -moz-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#adadad', GradientType=0);
  /* IE6-9 */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 3px 1px #777777;
  box-shadow: 0 1px 3px 1px #777777;
  text-shadow: 0 1px 0 #dedede;
  position: relative;
  display: inline-block;
}
a:before {
  width: 261px;
  height: 73px;
  position: absolute;
  top: -9px;
  left: -10px;
  background-color: transparent;
  background-attachment: scroll;
  background-image: url(https://www.podomatic.com/assets/homebase/icon-star-64091d94372b5effa95e1f6f8d07846e.png);
  background-position: left 30px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  content: "";
  border: #fff 2px solid;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 0 2px #666666;
  box-shadow: 0 0 0 2px #666666;
  z-index: 0;
}
a:after {
  background-color: transparent;
  background-attachment: scroll;
  background-image: url(https://www.podomatic.com/assets/homebase/icon-star-64091d94372b5effa95e1f6f8d07846e.png);
  background-position: right 30px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  width: 261px;
  height: 73px;
  position: absolute;
  top: -9px;
  left: -9px;
  /*background: none;*/
  content: "";
  z-index: 1;
}
<a href="#">Checkout</a>

Upvotes: 0

Axel
Axel

Reputation: 10772

You can use the :before and :after to insert the FontAwesome stars before and after the link text, like this:

a:before,
a:after {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #888;
}

a:before {
  content:"\f005"; /* FontAwesome star content */
  margin-right: 10px;
}
a:after {
  content:"\f005"; /* FontAwesome star content */
  margin-left: 10px;
}

And you don't need to use :before and :after to achieve your extra bordering effects. You can simply use comma separated box-shadow values with to achieve the same effect, like this:

box-shadow: 0 1px 3px 1px #777777, 0 0 0 10px #cbcbcb, 0 0 0 12px #fff, 0 0 0 14px #000;

The working example: 

body {
  margin: 0;
  padding: 0;
}
a {
  width: 247px; height:59px; float:none; margin:100px auto; font-family:Arial, Helvetica, sans-serif; font-size:25px; font-weight:bold; color:#555555; text-align:center; text-transform:uppercase; text-decoration:none; line-height:59px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3e3e3+0,d2d2d2+50,c6c6c6+51,adadad+100 *
  background: #e3e3e3;
  /* Old browsers */
  background: -moz-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #e3e3e3 0%, #d2d2d2 50%, #c6c6c6 51%, #adadad 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#adadad', GradientType=0);
  /* IE6-9 */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 3px 1px #777777;
  box-shadow: 0 1px 3px 1px #777777, 0 0 0 10px #cbcbcb, 0 0 0 12px #fff, 0 0 0 14px #000;
  text-shadow: 0 1px 0 #dedede;
  position: relative;
  display: block;
}
a:before,
a:after {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #888;
}

a:before {
  content:"\f005";
  margin-right: 10px;
}
a:after {
  content:"\f005";
  margin-left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 <a href="#">Checkout</a>

Upvotes: 3

Related Questions