CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】-CSSチュートリアル-php.cn

CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】

藏色散人

リリース： 2018-09-07 15:36:37

オリジナル

5778 人が閲覧しました

この記事では、CSS での疑似要素の具体的な使用法 (前と後) を詳しく紹介します。初心者の中には、一見聞き慣れた単語だと思うかもしれませんが、CSS に表示されると少し混乱してしまうかもしれません。 CSS が非常に強力であることは誰もが知っています。 WebページをこんなにカラフルにできるのはCSSの機能のおかげです。

まず第一に、CSS 疑似要素は、特定のセレクターに特殊効果を追加するために使用されます。 Web ページを作成するとき、いくつかの特殊なアニメーション効果は CSS 擬似要素から切り離すことができません。もちろん、CSS の疑似要素にはさまざまな種類がありますが、疑似要素によって制御される内容は要素によって制御される内容と同じですが、疑似要素はドキュメントツリーには存在せず、実際の要素ではないため、疑似要素と呼ばれます。疑似要素。以下では、具体的なコード例を通じて、CSS での :before および :after 疑似クラスの使用法を詳しく紹介します。

:before 疑似要素スタイルを持つ HTML コードの一部は次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1:before {content:url(/test/img/2.png)}
    </style>
</head>
<body>
<h1>这里是一段大标题</h1>
<p>css before伪元素使用代码示例</p>
</body>
</html>

ログイン後にコピー

上記のコードの効果は次のとおりです:

CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】

2. HTML コードの一部:after 疑似要素スタイルを使用すると、次のようになります:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1:after {content:url(/test/img/2.png)}
    </style>
</head>
<body>
<h1>这里是一段大标题</h1>
<p>css :after伪元素使用代码示例</p>
</body>
</html>

ログイン後にコピー

コードの効果は次のようになります:

CSSのビフォーアフターってどういう意味ですか？【詳しい使い方説明】