CSSの小さな矢印ボタン

Question

私はHTML/CSSで複製する必要がある以下のデザインがあります。

上記の設計は、基本的には、左の矢印ボタンとテキストです。

私はfiddleのテキストを複製しました（これは非常に簡単です）。私はどのようにテキストに左矢印を置くことができますか？

私はw3schoolsからtutorialの次を試しましたが、何とか私は同じ矢印を複製できませんでした。

（私はバイオリンで使用している）テキストのCSSコード：他の回答に基づいて

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

Answer 1

、これは右からフォントエンティティを産みます。

上記のコメントで説明したように、矢印はあなたが探している正確なものと同じではありません。それをカットしてイメージタグに追加するイメージを作成するか、イメージのソースをテキスト形式で見つける必要があります。

.share { 
 
    padding-left: 6%; 
 
    padding-top: 5%; 
 
    font-family: Roboto-Regular; 
 
    font-size: 16px; 
 
    color: #4676F2; 
 
} 
 
.share p::before { 
 
    content: "\27A6"; 
 
    color:#000; 
 
    padding-right:8px; 
 
    font-size: 25px; 
 
    vertical-align: middle; 
 
} 
 
.share p { 
 
    vertical-align: middle; 
 
}

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

 
<div class="share"> 
 
      <p><img src=""/>Share This Article</p> 
 
</div>

Answer 2

次のコードを試してみてください。ユニコードの矢印は、まさにあなたが嘲笑してしまいましたが、近いところにあるわけではありません。矢印が正確である必要がある場合は、.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>