如何在CSS中添加两颗星：之后？

Question

我需要添加两个星形图标，而不使用任何图像或字体真棒。我需要通过:after将它们添加到CSS中，这可能吗？

我希望它看起来像这样：

目前它看起来像这样：

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>

Answer 1

一种可能的解决方案是使用white-space: pre;，这样你就可以附加两颗星，并按照你所要求的:after在按钮的每一侧显示每颗星。

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>

另一种方法是将所有相关的样式放在一个地方，这样你就可以免费使用:before和:after作为星星，并分别控制每个样式的位置。

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>

Answer 2

您可以使用:before和:after在链接文本之前和之后插入FontAwesome星，如下所示：

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

而且您不需要使用:before和:after来实现额外的边界效果。您可以简单地使用逗号分隔的box-shadow值来实现相同的效果，如下所示：

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

工作实例：

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>

Answer 3

我编辑你的CSS代码请仔细检查。

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>

Answer 4

对于任何寻找Pure CSS明星的人来说，因为原始海报说他们不想使用fontawesome或图像，这里是代码：

<!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>

使用转换属性的-webkit和-mz前缀可以在旧版浏览器中呈现星形。否则，它是世界第一，因为在搜索了一段时间后，我找不到任何使用Pure CSS的明星。我应该相信发布三角形的CSS-Tricks网站，它让我想到重叠3个三角形，然后旋转2个三角形，创建一个星星。