CSS テクニックを使用してシェブロン矢印を作成するにはどうすればよいですか?

CSS テクニックを使用してシェブロン矢印を作成する

CSS を使用して、点で交差する 2 本の対角線を特徴とするシェブロン矢印を作成するには、次の手順を実行します。

1 つの方法では、CSS プロパティで適用される before または after などの疑似要素を利用します。前後の要素を追加し、回転させ、戦略的に配置することで、矢印の形状が形成されます。あるいは、before 要素に 2 つの境界線を追加し、transform:rotate を使用して回転させることもできます。

もう 1 つの方法では、疑似要素の代わりに実際の HTML 要素を使用します。これは、矢印を箇条書きとしてリストに組み込むことで実現できます。矢印の寸法に em 単位を使用すると、リストのフォント サイズに合わせて適切に拡大縮小することができます。

次の CSS コードは、後者のアプローチを示しています。

<code class="css">ul {
  list-style: none;
}

ul.big {
  list-style: none;
  font-size: 300%
}

li::before {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}

li:hover {
  color: red; /* For the text */
}

li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}</code>

HTML コードを示しています。使用法:

<code class="html"><ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

<ul class="big">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul></code>

以上がCSS テクニックを使用してシェブロン矢印を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。