CSS 疑似要素で右方向矢印を作るサンプル

2022年11月4日

環境
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>

CSS

Posted by arkgame

関連記事: