CSS圆圈过渡与雪佛龙在中间

Question

我希望得到一个播放按钮，就像找到的here一样。然而，而不是边界外的游戏按钮，我希望它是一个人字形的右边。但是，这两个都使用了我不完全理解的:after和.btn:hover, .btn:focus { background-position: 0 -14px; } 。

有人可以向我解释那些伪选择器的用途并指出我的正确指示吗？我正在尝试将该示例与this chevron codepen

结合起来

说完所有的话，我希望它看起来像这样。我只是觉得从第一个例子中获得那个漂亮的传统真的很酷。

Answer 1

根据Chevrons的要求，这就是我提出的。您可能需要重新调整细节，例如边框重量和位置。

.chevron {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  border: 0.25em solid #333;
  border-radius: 50%;
  text-align: center;
}

.chevron::after {
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	/*left: 0.15em;*/
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: middle;
	width: 0.45em;
}

.chevron.right:after {
	left: 0;
	transform: rotate(45deg);
}

.chevron.bottom:after {
	top: 0;
	transform: rotate(135deg);
}

.chevron.left:after {
	left: 0.25em;
	transform: rotate(-135deg);
}

<p>Chevron (top) <span class="chevron top"></span>
<p>Chevron (right) <span class="chevron right"></span>
<p>Chevron (bottom) <span class="chevron bottom"></span>
<p>Chevron (left) <span class="chevron left"></span>

Answer 2

其他人可能能够更好地解释它，但我想到它的方式有点像在css中生成一个html元素。

对于＆＃34; ___＆＃34;的每一个元素都有以下几点：'＃）;在开头（：before）或end（：after）添加无名子元素并在其中添加样式以下方式..＆＃34;。在这一点上，可能值得注意的是，除了它们出现的顺序之外，＆＃39;之前没有区别。和＆＃39;：＆＃39;。

它与实际意义上的任何其他元素真正不同的唯一方式是你需要指定“内容”。属性（即使它只是一个空的＆＃39;）。

所以例如，如果你把雪佛龙作为.png图像：

.circle{
    position: relative;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    border: 2px solid #fff;
}
.circle::after{
    content:'';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    height: 50px;
    width: 50px;
    background-image: url('../path/chevron.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

其他替代方案是：

• 将内容设置为＆＃39;＆gt;＆＃39;，而不是背景图片解决方案。
• 将元素设置为三角形，使用此css trick，而不是背景图像解决方案。

过渡是一个单独的问题。如果您需要帮助，请告诉我。