プラス記号の効果を実現する純粋な CSS (コード例)

この記事の内容は、純粋な CSS に記号を追加した場合の効果に関するものです (コード例)。必要な方は参考にしていただければ幸いです。

下の図のプラス記号の効果を実現します。

この効果を実現したい場合は、p が 1 つだけ必要です。要素。

前、後、境界線の機能には CSS を使用する必要があります。

最初に div ノートを設定します

<div></div>

次に境界線を設定します:

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

この時点の境界線は次のようになります:

##前とそのボーダートップの疑似クラスを使用して、「水平」を設定できます。

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}

絶対配置を使用していることに注意してください。このとき、次のようになります。

上記を参考に、after 疑似クラスと border-bottom を使用して "垂直":

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

ホバー疑似クラスを追加し、マウス ホバーの色を設定します:

最終スタイル:

いつ マウスをホバーすると色が変わります:

以上がプラス記号の効果を実現する純粋な CSS (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。