製品を選択した後、右下隅に√記号を表示するための純粋なCSS

製品を選択した後、右下隅に√記号を表示するための純粋なCSS

おすすめの記事:

CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます。サンプル コード: https://www.jb51.net/css/731762.html

効果

ここに画像の説明を挿入

分析:

1. 疑似要素セレクターを使用してコンテンツを追加します。
2. √記号の背景効果を実現するために、より広い境界線を使用します。
3. 透明な境界線を使用して余分な背景色を削除します。
4. 紫匡復相の位置決めを使用して、√ 記号を適切な位置に配置します。

CSSコード:

 &.選択{
              色: @テーマ;
              境界線: 0.02rem 実線 @theme;
              位置: 相対的;
              遷移: すべて 0.5 秒の緩和;
            }
            &.selected::after {
              コンテンツ: '✔';
              表示: ブロック;
              高さ: 0px;
              幅: 0px;
              位置: 絶対;
              下部: 0;
              右: 0;
              色:#fff;
              /**チェックマークのサイズ*/
              フォントサイズ: 10px;
              行の高さ: 8px;
              境界線: 10px 実線;
              境界線の色: 透明 #4884ff #4884ff 透明;
            }

要約する

純粋な CSS を使用して、商品を選択した後、右下隅に √ 記号を表示する方法についての記事はこれで終わりです。選択した商品の右下隅に √ 記号を表示することに関するその他の関連 CSS コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  CSS でよく発生する問題の整理 (ロゴのハッキング/コンテナの固定/画像の垂直方向の中央揃え)

>>:  Jenkins は Docker イメージを構築し、Harbor ウェアハウスにプッシュします

推薦する

nginx での書き換えジャンプの実装

1. 新旧ドメイン名のジャンプ適用シナリオ: ドメイン名ベースのリダイレクト。会社の古いドメイン名は...

HTML でフレームセット タグを使用するチュートリアル

フレームセット ページは通常の Web ページとは多少異なります。依然として <HTML>...

Vueにおける混合継承の詳細な説明

目次混合継承の影響: 1. 継承Vue.extend メソッド​プロパティを拡張する2. ミックスイ...

Docker で onlyoffice をインストールして展開する詳細なプロセス

0. システム要件CPU I5-10400F以上メモリ 16 GB、32 GBのメモリが最適ハードド...

MySQL 8.0.12 の詳細なインストールおよびアンインストール チュートリアル

1. MySQL 8.0.12 バージョンのインストール手順。 1. ダウンロードhttps://d...

Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

目次問題の説明Vueの動的コンポーネントとはアプリケーションシナリオの説明実装手順ステップ 1 (新...

HTML テーブル マウス ドラッグ ソート機能

効果画像: 1. ファイルをインポートする<script src="js/jquer...

Linux で MySQL データベースのデータ ファイル パスを変更する手順

rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...

私のCSSアーキテクチャのコンセプト - それは人によって異なり、ベストなものはなく、適切なものだけがある

はじめに<br />私はフロントエンド分野でかなり長い間働いており、CSS分野でも長い間...

親コンテナの CSS 均等分割 (完全三分の一) の実装

親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...

MySQL ベースのストレージエンジンとログの説明 (包括的な説明)

1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...

Nginx 逆生成 Mogilefs 分散ストレージ例の詳細な説明

1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...

CentOS8でのDockerの使い方の詳しい説明

1. CentOS8でのDockerのインストール カール https://download.doc...

MySQL 学習チュートリアル クラスター化インデックス

クラスタリングは、実際には InnoDB データベース エンジンに関連しています。したがって、インデ...