製品を選択した後、右下隅に√記号を表示するための純粋な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 ウェアハウスにプッシュします

推薦する

MySQL 悲観的ロックと楽観的ロックの実装

目次序文実際の戦闘1. ロックなし2. 悲観的ロック3. 楽観的ロック要約する序文悲観的ロックと楽観...

ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法

現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...

nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明

序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...

HTML iframe 使用状況の概要の収集

Iframe 使用状況の詳細な分析<iframe frameborder=0 width=17...

HTMLボタンを中央に配置する方法

HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...

MySQL の列から行への変換、フィールドの結合方法 (必読)

データシート:列から行へ: max(case when then) を使用max---集計関数は最大...

CSS スティッキーフッターのいくつかの実装

「スティッキーフッター」とはいわゆる「スティッキー フッター」は、新しいフロントエンドの概念や技術で...

Tomcat での jar のロードに関する異常な問題の分析と解決

現象の説明:プロジェクトでは、Springboot を使用して Web プロジェクトを開始します。起...

MySQL データベースの一般的な基本操作の分析 [データベースの作成、表示、変更、削除]

この記事では、例を使用して、MySQL データベースの一般的な基本操作について説明します。ご参考まで...

Centos8 は kdc 暗号化に基づいて nfs を構築します

目次構成nfs サーバー (nfs.skills.com) nfs クライアント (client.s...

Nginx リバース プロキシを使い始める

目次概要リバースプロキシの役割Nginx リバース プロキシ イントラネット侵入 8081 ポートの...

MySQL 権限とデータベース設計のケーススタディ

権限とデータベース設計ユーザー管理SQLyogを使用してユーザーを作成し、権限を付与する基本コマンド...

Linuxはデータディスクがアンインストールされ、新しいカスタムイメージを作成できることを確認します。

カスタムイメージに関するよくある質問データディスクを表示するにはどうすればいいですか? df コマン...

jsを使用して簡単な抽選機能を実現する

この記事では、参考までに、簡単な抽選機能を実装するためのjsの具体的なコードを共有します。具体的な内...

NodeはMySQLに接続し、追加、削除、変更、チェックのための実装コードをカプセル化します。

目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...