【CSS上級】擬似要素の使い方の素晴らしさと単一タグの美しさ_html/css_WEB-ITnose

最近、傑作「CSS SECRET」(CSS Revealed) を研究しており、CSS についての理解が深まり、次のプロジェクトに取り組んでいます:

CSS3 Wonderful Ideas - Demo (Chrome ブラウザを使用してください) を開きます。一見の価値は十分にあります）。単一のラベルを使用してさまざまなパターンが完成しますが、その多くはこの記事に関連します。

また、これが良いと思った学生が私の Github: CSS3 Wonderful Ideas にスターを付けてくれることを願っています。

本文はここからです。この記事では、主に疑似要素の前後のさまざまな使い方について説明します。

:before と ::before の違い

具体的な使い方を紹介する前に、疑似クラスと疑似要素について簡単に紹介しましょう。疑似クラスについては誰もがよく耳にしますが、実際には、CSS ではこの 2 つを区別しています。

時々、疑似クラス要素が 1 つのコロン (:) ではなく 2 つのコロン (::) を使用していることがわかります。これは、CSS3 仕様の要件の一部であり、疑似クラスと疑似クラスを区別することです。ほとんどのブラウザでは、プロセッサは両方の表現をサポートしています。

#id:after{ ...}#id::after{ ...}

CSS3 疑似クラスには単一コロン (:) が使用され、CSS3 疑似要素には二重コロン (::) が使用されます。 :before などの CSS2 の既存の疑似要素の場合、::before の単一コロンと二重コロンの記述方法は同じ効果があります。

そのため、Webkit、Firefox、Opera、およびその他のブラウザとの互換性のみが必要な Web サイトの場合は、疑似要素に二重コロンの記述を使用することをお勧めします。IE ブラウザとの互換性が必要な場合は、使用する方が安全です。 CSS2のシングルコロン記述。

より具体的な情報については、MDN の擬似クラスと擬似要素の理解を確認してください。

この記事の主役は、前後の疑似要素です。この 2 つの疑似要素の魅力について、以下で詳しく説明します。

フロートをクリアするには after を使用します

これはおそらくフロントエンドユーザーには、詳細な説明がなくてもページのフロートをクリアするために after 疑似要素を使用することが知られています。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }

疑似要素とCSSスプライト スプライト写真

これも古い姿勢です。スプライト画像については誰もがよく知っているはずですが、http リクエストを減らすために、複数の画像アイコンを 1 つの画像に結合することで、多くの Web サイトでスプライト画像に対する大きな需要が依然としてあります。

しかし、スプライト画像を作成する過程や、現在多くのパッケージングツールによって自動生成されるスプライト画像では、各アイコンにどれだけのマージンを確保する必要があるかという問題があります。下の図を見てください:

-->

たとえば、上記の状況では (ボタンのアイコンがスプライト画像を使用していると仮定します)、製品はボタンを突然左の状態から状態に変更する必要があります。ある日、右にあるので、スプライト画像は元々プリセットされていました。左のマージンが明らかに十分ではなく、ボタン内に他のグラフィックが表示されてしまいます。

そして、私たちは通常、小さなアイコンに余分なラベルを追加しません（意味論的ではありません）。

通常、この状況でスプライト画像を使用する必要がある場合は、ボタンに擬似要素を設定し、擬似要素の高さと幅を元のアイコンのサイズに設定してから、絶対位置を使用して位置を特定します。必要な場所に配置すると、スプライトに関係なく、画像内の各アイコンの余白がどのようなものであっても、完全に適合させることができます。

単一の色でボタンのホバーとアクティブの明暗の変化を実現します

最近のプロジェクトでは、さまざまなビジネス シナリオに従って、操作でボタンの異なる背景色の値を構成する必要があります。しかし、ボタンには通常、通常状態、ホバー状態、アクティブ状態の 3 つの色の値があることがわかっています。通常、ホバー状態は元の色よりわずかに明るく、アクティブ状態はわずかに暗くなります。

それは次のようになります (下の図):

操作する生徒の負担を軽減するために、ボタンが追従するようにホバー色とアクティブな色を設定せずに、背景色を 1 つだけ設定するにはどうすればよいですか?変更。はい、前後の 2 つの疑似要素を使用して実行できます。

色についてのちょっとした知識

色の値についてのちょっとした知識をご紹介します。 #fff、rgb(255,255,255)、HSL (HSV) に加えて、私たちは色の表現に精通しています。

HSL を例に挙げます。これは、円筒座標系での RGB カラー モデルの点の表現です。 HSLは色相、彩度、明度（英語：Hue、Saturation、Lightness）の略です。

HSL を使用して表現された色の場合、L (明るさ) の値を変更するだけで、より明るい色またはより暗い色を得ることができます。

もちろん、明るさの変更は透明レイヤーを重ねることで実現できます。ここでは、擬似要素を使用してボタンの背景色を変更することは、半透明レイヤーを重ねることによって実現されます。

简单来说，在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色。（这句话不是很严谨，假设一个元素是纯白元素，叠加白色半透明层也是不会更亮的）

反之，在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色。

所以，我们用 before 伪元素生成一个与按钮大小一致的黑色半透明层 rgba(0,0,0,.2)，在 .btn:hover:before 时显示，用 after 伪元素生成一个与按钮大小一致的白色半透明层 rgba(255,255,255,.2)，在 .btn:active:before 时显示，就可以做到只配置一个背景底色，实现 hover 、active 的时的明暗变化。

.pesudo:before{  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index:-1;  background:rgba(0,0,0,.1);}.pesudo:hover:before{  content:"";}.pesudo:after{  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index:-1;  background:rgba(255,255,255,.2);}.pesudo:active:after{  content:"";}

戳我看demo 。

变形恢复

有的时候，设计师们希望通过一些比较特殊的几何图形，表达不同的意思。

用 CSS3 transfrom 属性，我们可以轻松的得到一个梯形，菱形或者平行四边形。有时我们设计师们希望在这些容器内配上文字，譬如平行四边形可以表达一种速度之感。

但是如上图所示，内容文字也会跟着 CSS3 变换一起发生了扭曲，通常我们会用一个 div 做背景进行变换，而文字则是放在另外一个 div 中。

但是运用伪元素，我们可以去掉这些不合语义化多余的标签，运用 before 伪元素，将 CSS3 变换作用于伪元素上，这样变形不会作用于位于 div 上的的文字，而且没有使用多余的标签。

戳我看demo 。

伪元素实现换行

大家都知道，块级元素在不脱离正常布局流的情况下是会自动换行，而行级元素则不会自动换行。

但在项目中，有需求是需要让行级元素也自动换行的，通常这种情况，我都是用
换行标签解决。而 《CSS SECRET》 中对
标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码。
，想想自己敲代码以来，用的
标签还不少。

运用 after 伪元素，可以有一种非常优雅的解决方案：

.inline-element::after{    content: "\A";    white-space: pre;}

通过给元素的 after 伪元素添加 content 为 "\A" 的值。这里 \A 是什么呢？

有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 "\000A"， 或简化为 "\A"。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。

而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在块级元素末尾实现换行。

原文Demo。

   more magic -- 单标签图案

上面介绍的是伪元素众多用法的一部分，伪元素的作用远不止于此。有了before 、after 两个伪元素。一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果：

单标签实现浏览器图标：

单标签天气图标：

CSS3奇思妙想，采用单标签完成各种图案 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。

也希望觉得不错的同学顺手在我的 Github 点个 star ： CSS3奇思妙想 。

希望这篇文章对大家有所帮助，尤其是在对问题解决的思维层面上。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

如果本文对你有帮助，请点下推荐，写文章不容易。