如何通过 :after 在 CSS 中添加两颗星？

Question

我需要在不使用任何图像或字体的情况下添加两个星形图标。我需要将它们添加到 CSS 到 :after，这可能吗？

我希望它看起来像这样：

目前看起来是这样的：

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: "✭                        ✭";  /* 05 */
  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: "✭"; /* 05 */
}

a:before {
  margin-right: 12px
}

a:after {
  margin-left: 12px;
}

<a href="#">Checkout</a>

Answer 2

您可以使用 :before 和 :after 在 link 文本前后插入 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: 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

对于寻找纯 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 前缀可以在旧版浏览器中呈现星星。不然就是世界第一了，因为我找了一段时间，用PureCSS也没找到星星。我应该归功于发布三角形的 CSS-Tricks 网站，这让我想到了重叠 3 个三角形，然后旋转其中的 2 个来创建一个星星。

如何通过 :after 在 CSS 中添加两颗星？

How to add two stars in CSS through :after?

html

css

pseudo-element