css3書き込み削除

CSS3 は、Web デザインやレイアウトに使用されるスタイルシート言語で、豊富な機能と強力な機能を備えています。その中でも取り消し線は一般的な効果で、通常、削除されたテキストやコンテンツを表すために使用されます。この記事ではCSS3を使った取り消し線の書き方を紹介します。

1. text-decoration 属性を使用する

text-decoration 属性は、取り消し線効果などのテキスト装飾効果を設定するために使用されます。値を line-through に設定すると、取り消し線効果を実現できます。たとえば、次の CSS コード:

.delete {
    text-decoration: line-through;
}

このスタイルは、クラス名が delete の要素に適用され、すべてのテキスト コンテンツに取り消し線効果が適用されます。

2. カスタマイズされた取り消し線スタイル

text-decoration 属性を使用して取り消し線効果を設定することに加えて、CSS3 には取り消し線スタイルをカスタマイズするさまざまな方法も用意されています。それはより美しく、パーソナライズされたものです。

2.1 取り消し線の色を設定します。

text-decoration-color プロパティを使用して取り消し線の色を設定します。例:

.delete {
    text-decoration: line-through;
    text-decoration-color: red;
}

このスタイルは、次のように適用されます。クラス名要素を削除して、すべてのテキスト コンテンツの取り消し線の色が赤になるようにします。

2.2 取り消し線の位置を設定します

text-decoration-position プロパティを通じて取り消し線の位置を設定します。デフォルトでは、取り消し線はテキストの中央にあります。このプロパティを使用して、取り消し線の上下のオフセットを設定できます。

.delete {
    text-decoration: line-through;
    text-decoration-position: under;
}

このスタイルは、すべてのテキスト コンテンツの取り消し線の位置がテキストの下になるように、クラス名が delete の要素に適用されます。

2.3 取り消し線の幅を設定する

text-decoration-thickness プロパティで取り消し線の幅を設定します。デフォルトでは、取り消し線の幅は 1px です。このプロパティを使用して取り消し線の幅を変更できます。

.delete {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

このスタイルは、クラス名が delete の要素に適用されるため、すべてのテキスト コンテンツの取り消し線の幅は 2px になります。

3. 疑似要素を使用して取り消し線を実現する

text-decoration 属性を使用して取り消し線効果を設定することに加えて、CSS3 では疑似要素を使用して取り消し線効果を実現することもできます。 。疑似要素の content 属性を空に設定し、その幅、色、位置、その他の属性を設定すると、取り消し線効果を実現できます。たとえば、次の CSS コード:

.delete::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

このスタイルは、クラス名が delete の要素の擬似要素に適用され、幅 1px、色が黒の取り消し線が表示されます。テキストの下にあります。

概要

テキスト装飾属性、カスタム取り消し線スタイル、疑似要素を使用して、取り消し線効果を簡単に実現できます。読書体験の考慮や SEO の最適化など、一部の特殊なシナリオでは取り消し線が適用されないことに注意してください。使用する場合は、具体的な状況に基づいて考慮する必要があります。

以上がcss3書き込み削除の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。