ホームページ ウェブフロントエンド htmlチュートリアル CSS before和after伪类元素应用实例及分析

CSS before和after伪类元素应用实例及分析

Jun 01, 2016 am 09:53 AM
after before 疑似クラス

在分析before和after伪元素之前,我们先看一个实例, 这个实例使用了css伪类元素affter制作了一个自定义的input check样式。

实例如下:

<code class="language-css">


<title>CSS input checkbox自定义样式</title>
<style type="text/css">
.compare_button .checkboxcss {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    left: 0;
    background: #f7f7f7;
    border: 2px solid #f5b34f;
    border-radius: 5px;
}
.compare_button {
    position: relative;
}
.compare_button .checkboxcss:after {
    opacity: 0;
    content: '';
    position: absolute;
    width: 7px;
    height: 3px;
    background: transparent;
    top: 3px;
    left: 3px;
    border: 3px solid #1e8cc5;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.compare_button input[type=checkbox]:checked + label:after {
    opacity: 1;
}
</style>


<div class="compare_button">
        <input type="checkbox" id="compare_39680" class="checkbox-input">
        <label class="checkboxcss" for="compare_39680"></label>
        <span>compare text</span>
    </div>

</code>
ログイン後にコピー

效果图:

CSS before和after伪类元素应用实例及分析

 

下面我们对CSS before和after伪类元素的用法进行描述

一、伪元素基本用法

在CSS选择器中加上相应伪类选择符就可以了,像这样:#example: before或者#example: after,这里是使用ID选择器,比如下面的CSS代码:

<code class="language-css">#example:before {
  content: "\"";
}
#example:after {
  content: "\"";
}</code>
ログイン後にコピー

它的效果就是为example标签前后加上双引号。

      和伪类的选择符很像,但是有一点小区别,就是伪类选择符实际上是用两个冒号,::before的形式,以和伪类区别开,但是只用一个冒号浏览器也是可以识别的,在CSS3中规定是一个冒号就可以了。

      如果没有绑定标签,像这样::before{ content:”=”;} 这样的伪元素是没有意义的,代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了

标签和它的所有内容,你仍会在页面上看见两个散列符号:一个在里,另一个在标签里。

      那么可不可以给伪元素再添加伪元素呢?比如下面这个代码:

<code class="language-css">#example:after:after{
    content: "after";
}</code>
ログイン後にコピー

在浏览器中刷新,测试一下会发现什么也没有显示,也就是说再给伪元素添加伪元素目前很多浏览器上是无效的,浏览器忽略掉该定义,只能识别一层伪元素,但是既然可以伪元素添加伪元素,可以期待再为伪元素添加伪元素,其表现力是很强的。

 

二、伪元素属性和样式

1.content属性

每个伪元素必须要有content属性,否则的话浏览器不能识别,你可以为content属性添加空引用作为它的值(即:content:“”)。

你也可以为content包含一个指向一个图像的URL,就像在css里包含一个背景图像一样:

<code class="language-css">p:before {

  content: url(image.jpg);
}</code>
ログイン後にコピー

也可以包含一个Data URI代替图像引用,就像使用css背景一样。

你还可以选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”,比如:

<code class="language-css">a:after {
  content: attr(href);
}</code>
ログイン後にコピー

attr()函数的功能是把得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时,它可以用作一个包含所有URl的打印样式表。

2.标签属性

伪元素也是元素,所以你可以为它添加大部分其他元素具有的属性,比如定位属性,字体属性,背景属性和盒模型的属性等,另外由于伪元素默认是内联元素,所以如果要使得盒模型中的height等属性有效的话,必须要把它转化为块元素,具体就是设置其display属性为block,或者设置为float等。如下:

<code class="language-css">#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: "\"";
    width: 20px;
    height: 20px;
    background: #6F3;
}</code>
ログイン後にコピー

既然伪元素可以定义position等属性,那么before和after的约束就很有限了,before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致,before出现在相对绑定的元素之前,而after出现在相对绑定的元素位置之后。

另外既然可以为伪元素定义盒子模型的属性,就不得不说,伪元素默认为其目标元素的子元素,比如#example:after,伪元素after的父元素就是#example选择符对应的元素,它具有一般子元素盒模型的特性,即为他定义的height和width等属性规则为影响目标元素的规则。

 

三、伪元素的兼容性

基本可以放心的使用伪元素,因为它有很好的兼容性,可以不用加浏览器前缀而很好的使用它。

支持:before 和 :after 伪元素的浏览器有:

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。

但是IE6和IE7上并不支持,如果不是很在意他们的用户数量的话,基本可以很自由的使用啦。

 

四、伪元素的作用

     这里借用Thoriq Firdaus的几个例子简单说一下伪元素的用法。另外伪元素既然是伪元素,那么作为结构与表现分离的一种实现,其作用应该是对文本起到很好的修饰作用,而不是把它用来表现文本。

阴影效果

使用伪元素:before 和 :after 。它们两个都是绝对定位,而且使用负z-index来放置到图片后方实现阴影效果。

CSS before和after伪类元素应用实例及分析

3D按钮

利用伪元素结合CSS3 box-shadow 来绘制一个令人吃惊的3D按钮,仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。

CSS before和after伪类元素应用实例及分析

叠加图像效果

使用伪元素来仅仅依靠一个图片标签创建一个“凌乱的”叠加图像效果也是可能的。伪元素用于建立一个图片叠加的错觉,通过使用z-index负值使“叠加”的图片在真正的图片后面来实现。

CSS before和after伪类元素应用实例及分析

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

css擬似セレクター学習擬似クラスセレクター解析 css擬似セレクター学習擬似クラスセレクター解析 Aug 03, 2022 am 11:26 AM

前回の記事「Css擬似セレクターの学習 - 擬似要素セレクターの解析」では擬似要素セレクターについて学習しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 :nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。 Nov 20, 2023 am 11:20 AM

:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: &lt;divid="container" &gt;&lt;divclass="item"&gt ;最初の子要素&lt;/div&gt;&lt;divclass="item"&

:active 擬似クラス セレクターを使用して、マウス クリック効果の CSS スタイルを実装します。 :active 擬似クラス セレクターを使用して、マウス クリック効果の CSS スタイルを実装します。 Nov 20, 2023 am 09:26 AM

:active 疑似クラス セレクターを使用してマウス クリック効果を実現する CSS スタイル CSS は、Web ページのパフォーマンスとスタイルを記述するために使用されるカスケード スタイル シート言語です。 :active は CSS の疑似クラス セレクターで、マウスをクリックしたときに要素の状態を選択するために使用されます。 :active 擬似クラス セレクターを使用すると、クリックされた要素に特定のスタイルを追加して、マウス クリック効果を実現できます。以下は、:active 疑似クラス セレクターを使用してマウス クリック効果を実現する方法を示す簡単なサンプル コードです。

insertbefore と before の違い insertbefore と before の違い Nov 30, 2023 pm 02:34 PM

insertbefore と before の違い: 1. 使用法; 2. パラメーター; 3. 戻り値; 4. 互換性; 5. パフォーマンス; 6. セレクター; 7. 要素の自動作成; 8. エラー処理; 9. クリーニング; 10.チェーンコール; 11. その他の違い。詳細な紹介: 1. 使用法、insertBefore は任意の DOM 要素で直接呼び出すことができる DOM メソッド、before は jQuery オブジェクトでのみ呼び出すことができる jQuery メソッド、2. パラメータなど。

疑似クラスと疑似要素の違いは何ですか? 疑似クラスと疑似要素の違いは何ですか? Dec 05, 2023 am 11:24 AM

疑似クラスと疑似要素の違いは次のとおりです: 1. 疑似クラスは特定の要素に特殊効果を追加するために使用されますが、疑似要素は特定の要素の前後にコンテンツやスタイルを追加するために使用されます; 2. 疑似要素 クラスは通常、表現されます。単一のコロン「:」で表されますが、疑似要素は通常、二重コロン「::」で表されます。

CSS の疑似クラスと疑似要素の高度なアプリケーション スキルと実践的な事例共有をマスターします。 CSS の疑似クラスと疑似要素の高度なアプリケーション スキルと実践的な事例共有をマスターします。 Dec 23, 2023 am 08:52 AM

CSS の疑似クラスと疑似要素の高度な応用スキルと実践例をマスターします。フロントエンド開発において、CSS は Web ページを美しくし、ユーザー エクスペリエンスを向上させるために使用できる必須の技術です。 CSS では、疑似クラスと疑似要素は、開発者が特殊効果を実現し、Web ページをより豊かで多様性のあるものにするのに役立つ非常に強力なツールです。この記事では、疑似クラスと疑似要素に関する高度なアプリケーション スキルと実践的なケースをいくつか紹介し、対応するコード例を示します。 1. 疑似クラス: hover 疑似クラス: ユーザーがマウスを移動するときに hover 疑似クラスが使用されます

疑似要素と疑似クラスの違いは何ですか? 疑似要素と疑似クラスの違いは何ですか? Oct 09, 2023 pm 02:48 PM

疑似要素と疑似クラスの違いは次のとおりです。 1. 疑似クラスは要素の特定の状態または位置を選択するために使用されるセレクターですが、疑似要素は要素のコンテンツの前後に追加のコンテンツを挿入するために使用されるセレクターです。 ; 2. 疑似クラスの機能は、要素の状態または位置に応じて要素のスタイルを変更することですが、疑似要素の機能は、要素のコンテンツの前後に追加のコンテンツを挿入し、そのスタイルを変更することです。 。

Web の疑似クラスと疑似要素とは何ですか Web の疑似クラスと疑似要素とは何ですか Oct 12, 2023 pm 01:28 PM

Web の疑似クラスと疑似要素は、特定の要素を選択してスタイル設定するために使用される CSS セレクターの特別な形式です。詳細な説明: 1. 疑似クラスは、要素の特定の状態または動作を選択するために使用されるセレクターです。コロン (:) で始まり、要素に追加のスタイルを追加するために使用されます。2. 疑似要素は、要素のコンテンツの前または前。生成されたコンテンツの後に挿入される、二重コロン (::) で始まるセレクターは、HTML 構造にない追加のコンテンツを作成するために使用されます。

See all articles