html - css 中的小箭头按钮

Question

我有一个设计，我必须在 HTML/CSS 中复制它。

上面的设计基本上是左边带有箭头按钮的文本。

我已经复制了fiddle中的文字(这非常简单)。我想知道如何将箭头留在文本上？

我试着按照这个 tutorial来自 w3schools 但不知何故我无法复制相同的箭头。

文本的 CSS 代码(我在 fiddle 中使用过):

.share {
    padding-left: 6%;
    padding-top: 5%;
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #4676F2;
}

Answer 1

请尝试以下代码。 unicode 箭头并不完全是您模拟但关闭的方式。如果您需要精确的箭头，您可以将 .share::before 规则切换为使用背景图像。

.share {
    padding-left: 6%;
    padding-top: 5%;
    font-family: Roboto-Regular;
    font-size: 16px;
    color: #4676F2;
}

.share::before {
  content: "\27A6";
  color:#000;
  padding-right:8px;
}

<div class="share">Share This Article</div>