CSS 疑似要素で右方向矢印を作るサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
1.position:relative
要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて
自分自身からの相対オフセットで配置されます。
2.padding-left
padding-left は CSS のプロパティで、要素のパディング領域における左側の幅を設定します。
3.transform: rotate(a)
rotate() で生成される回転の量は、 <angle> で指定します。
正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは点対称と呼ばれます。
使用例
<!DOCTYPE html> <html> <head> <style> .right_arrow { position: relative; padding-left: 20px; /*矢印アイコンのスペース*/ } /* 右方向の矢印の表示設定 */ .right_arrow::before { content: ""; margin: auto; position: absolute; top: 0; bottom: 0; left: 2px; width: 10px; /* 左側の長さ */ height: 10px; /* 右側の長さ */ border-top: 1px solid skyblue; /* 左側の太さと色 */ border-right: 1px solid skyblue; /* 右側の太さと色 */ transform: rotate(45deg); /* 右方向へ回転 */ } </style> </head> <body> <p class="right_arrow">テストデータ表示</p> </body> </html>