ボタンタグの「く」を文字の前に表示させたい
解決したいこと
現在、ボタンタグで二つのボタンを作っております。
「< 前へ」のように「前へ」の前に「<」を表示させるようにしたいです。
例）
Ruby on RailsでQiitaのようなWebアプリをつくっています。
記事を投稿する機能の実装中にエラーが発生しました。
解決方法を教えて下さい。
該当するソースコード
<div class="area">
<a class="button1" href="#">前へ</a>
<a class="button2" href="#">次へ</a>
</div>
.area{
text-align: center;
}
.button1{
display: inline-block;
width: 100px;
padding: 10px;
border-radius: 4px;
background-color:#37538C;
color: #fff;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.button1::after{
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
transform: rotate(-45deg);
margin-left: 10px;
vertical-align: 1px;
}
.button2{
display: inline-block;
width: 100px;
padding: 10px;
border-radius: 4px;
background-color:#37538C;
color: #fff;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.button2::after{
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
margin-left: 10px;
vertical-align: 1px;
}
ご教授いただけたら幸いです。
よろしくお願い致します。
0
