ホームページ > 記事 > ウェブフロントエンド > CSS を使用して文字の半分のスタイルを設定する方法
この記事では主に、文字の半分のスタイルを設定する純粋な CSS 実装を紹介します。これにより、水平と垂直の半分、水平と垂直の 3 分の 1 などの効果が得られます。必要な場合は、stackoverflow で見られる質問を参照してください。半分の文字にスタイルを設定するには、多くの専門家が答えています。私はただ待って、学び、見守るつもりです。
1: 基本的な解決策:
html:79128b707bc5d3919ddcdd09293e6cadX54bdf357c58b8a65c66d7c19c8e4d114
903faa1dbae0d270ff09b50d4b48b2caY54bdf357c58b8a65c66d7c19c8e4d114
90bcc9ebcf701d9a4d07c15b1f400c1aZ54bdf357c58b8a65c66d7c19c8e4d114
33b877cafda44bf9d3f1ff0d02485bcbA54bdf357c58b8a65c66d7c19c8e4d114
css:
.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: black; /* or transparent, any color */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { display:block; z-index:1; position:absolute; top:0; left:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; color: #f00; }
効果は図に示すとおりです:
この方法は、任意のダイナミック テキストまたは単一文字に使用され、自動的に適用されます。ターゲット テキストにクラスを追加するだけで、残りはすべて行われます。
同時に、元のテキストのアクセシビリティは保持され、視覚障害者が使用するスクリーン リーダーで認識できます。
単一文字の実装:
純粋な CSS。必要なのは、スタイル文字の半分をレンダリングしたいすべての要素に .halfStyle クラスを適用することだけです。
文字を含む各 span 要素に対して、data-content="X" などのデータ属性を追加し、.halfStyle:before のように擬似要素で content:attr(data-content) を使用できます。クラスは動的になるため、インスタンスごとにハードコーディングする必要はありません
他の効果を自分でテストしてください。 。 。
2: リボンを左右に開き、両側のスタイルを設定しますCSSを変更:
.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the left part */ display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the right part */ display:block; direction: rtl; /* very important, will make the width to start from right */ position:absolute; z-index:2; top:0; left:50%; width: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }
CSS:
.halfStyle { position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ } .halfStyle:before { /* creates the top part */ display:block; z-index:2; position:absolute; top:0; height: 50%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the bottom part */ display:block; position:absolute; z-index:1; top:0; height: 100%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ }
css:
.halfStyle { /* base char and also the bottom 1/3 */ position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ color: #f0f; text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle:before { /* creates the top 1/3 */ display:block; z-index:2; position:absolute; top:0; height: 33.33%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #fa0; /* for demo purposes */ } .halfStyle:after { /* creates the middle 1/3 */ display:block; position:absolute; z-index:1; top:0; height: 66.66%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }
css:
.halfStyle { /* base char and also the right 1/3 */ position:relative; display:inline-block; font-size:80px; /* or any font size will work */ color: transparent; /* hide the base character */ overflow:hidden; white-space: pre; /* to preserve the spaces from collapsing */ color: #f0f; /* for demo purposes */ text-shadow: 2px 2px 0px #0af; /* for demo purposes */ } .halfStyle:before { /* creates the left 1/3 */ display:block; z-index:2; position:absolute; top:0; width: 33.33%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #f00; /* for demo purposes */ text-shadow: 2px -2px 0px #af0; /* for demo purposes */ } .halfStyle:after { /* creates the middle 1/3 */ display:block; z-index:1; position:absolute; top:0; width: 66.66%; content: attr(data-content); /* dynamic content for the pseudo element */ overflow:hidden; pointer-events: none; /* so the base char is selectable by mouse */ color: #000; /* for demo purposes */ text-shadow: 2px 2px 0px #af0; /* for demo purposes */ }
以上がCSS を使用して文字の半分のスタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。