html - 如何通过:after?在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; , 这样你就可以附上两颗 star 并用 :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>