How to add two stars in CSS through :after? - html

Question

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:
Currently it looks like this:
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;
}
Checkout

Answer 1

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;
}
Checkout
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;
}
Checkout

Answer 2

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"/>
Checkout

Answer 3

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;
}
Checkout

Answer 4

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.