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

推薦する

CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順

目次簡単な紹介1. 現在のgccバージョンを確認する2. gccインストールパッケージ(バージョン1...

MySQL 5.7.17 zip パッケージ バージョンを Windows 10 にインストールするチュートリアル

mysql5.7.17のインストールチュートリアルを参考までに共有します。具体的な内容は次のとおりで...

MySql マスタースレーブレプリケーションメカニズムの包括的な分析

目次マスタースレーブレプリケーションメカニズム非同期レプリケーション準同期レプリケーションマスタース...

Spark と Scala を使用して Apache アクセス ログを分析する方法

インストールまず、Java と Scala をインストールし、次に Spark をダウンロードしてイ...

Chrome デベロッパー ツールの詳細な紹介 - タイムライン

1. 概要ユーザーは、アクセスする Web アプリケーションがインタラクティブでスムーズに実行される...

HTML でスタイルを使用して属性を追加する例

必要なリンクにインライン スタイルを追加します。コードをコピーコードは次のとおりです。 <a ...

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

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

MySQLはtruncateコマンドを使用してデータベース内のすべてのテーブルを素早くクリアします

1. まずSELECT文を実行して、すべての切り捨て文を生成します。ステートメント形式: selec...

Mysqlリモート接続構成を実装する2つの方法

Mysqlリモート接続構成を実装する2つの方法会社で働いていると、誰かのコンピュータに保存されている...

Alibaba Cloud ECSインスタンスのユーザールートパスワードとリモート接続方法を設定する方法

Alibaba Cloud サーバーを購入した後、新しいインスタンスが正常に動作できるようにするには...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

ubuntu16.04でNFSサービスを構築する方法

NFS の紹介NFS (ネットワーク ファイル システム) は、FreeBSD でサポートされている...

MySql インデックスを表示および最適化する方法

MySQL はハッシュ インデックスと Btree インデックスをサポートしています。 InnoDB...

Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル

目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...

Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...