カスタムCSS取り消し線
user10249871
2つの価格を表示したいWebアプリを作成しています。
- 価格1は実際の価格である必要があります。
- 価格2は割引価格である必要があります。
下の画像のように、価格1をキャンセル済みとして表示したいのですが、これに使用するCSSプロパティがわかりません。
どんな助けでも大歓迎です。
プログラマー
必要なのは、希望するストライキを行うための基本的なCSSです。この場合、crossクラスを古い価格に追加できます。
.cross {
position: relative;
display: inline-block;
}
.cross::before, .cross::after {
content: '';
width: 100%;
position: absolute;
right: 0;
top: 50%;
}
.cross::before {
border-bottom: 2px solid red;
-webkit-transform: skewY(-10deg);
transform: skewY(-10deg);
}
.cross::after {
border-bottom: 2px solid red;
-webkit-transform: skewY(10deg);
transform: skewY(10deg);
}<p>$9.99</p>
<p class="cross">$19.99</p>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
2つの段落があるテキストを使用したホバーのカスタム取り消し線
- 2
Flutterのテキストウィジェットにカスタム取り消し線を追加する方法
- 3
CSS-1つの要素で下線、取り消し線、および上線（スタイルと色を使用）
- 4
リストアイテムと取り消し線機能の削除ボタン（JavaScript）
- 5
JavaScript取り消し線
- 6
Reactの取り消し線
- 7
HttpClientの取り消し線
- 8
特定のリストアイテムを介したJqueryの取り消し線
- 9
取り消し線はSQLiteデータベースに保存されません
- 10
CSS取り消し線効果、Firefoxの問題
- 11
Python：取り消し線/取り消し線/オーバーストライク文字列型を作成する
- 12
ターミナルEmacsでの取り消し線
- 13
取り消し線を表示するための{％if％}タグ
- 14
リストアイテムをonClickで取り消し線を引こうとしていますが、送信ボタンが壊れています
- 15
スーパーはReactで取り消し線を引いた
- 16
取り消し線のテキスト：Microsoft Lync
- 17
SwiftUIのタップされたforeachテキストアイテムに取り消し線（）を適用するにはどうすればよいですか？
- 18
CSSの取り消し線はテキストとは異なる色ですか？
- 19
Windows Phone8の取り消し線
- 20
Slickgrid行の取り消し線
- 21
NSAttributedStringの取り消し線：「式のタイプがコンテキストなしであいまいです」
- 22
Rのxlsxファイルから「取り消し線」スタイルを検出する方法
- 23
チェックボックスの取り消し線テキスト
- 24
リストビューテキストビュー取り消し線
- 25
テキストの取り消し線を空白に拡張したい
- 26
取り消し線のUnicodeテキストを削除しますか？
- 27
iOS 9：AVPlayerViewControllerSwiftの使用。（取り消し線の付いた再生ボタン）
- 28
スペースバーを押し続けるとカスタムCSSカーソルが消える
- 29
チェックボックスに取り消し線を追加する
コメントを追加