ホームページ > 記事 > ウェブフロントエンド > CSSで水平線の矢印を実装する方法

CSSで水平線の矢印を実装する方法

青灯夜游オリジナル: 2022-04-25 18:58:204890ブラウズ

方法: 1. 空の要素を定義します。 2. 「::before」とコンテンツを使用して水平線を挿入します。構文は「Element::before{content:"——"}」です。 3. 「: :after」とコンテンツ挿入矢印を使用します。構文は「Element::after{content:">"}」です。

CSSで水平線の矢印を実装する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

水平線付き矢印のcss実装

実装方法:

空要素を定義、(たとえば、コンテンツを含まない span タグ)
::before セレクターと content 属性を使用して水平線を挿入します
Use::after セレクターとコンテンツ属性挿入矢印

実装例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span::before{
content: "——";
}
span::after{
content: ">";
}
p::before{
content: "<";
}
p::after{
content: "=";
}
    </style>
</head>
 
<body>
    <span></span>
<p></p>
</body>
 
</html>

CSSで水平線の矢印を実装する方法

説明: ::before 選択 ::after セレクター

::before セレクターは、選択された要素の前にコンテンツを挿入します。

::after セレクターは、選択した要素の後にコンテンツを挿入します。

::before セレクターと ::after セレクターの両方で、挿入するコンテンツを指定するために content 属性を使用する必要があります。

拡張知識: コンテンツの使用シナリオ

コンテンツの定義では、:before および :after 擬似関数と組み合わせて使用されることが記載されています。 -要素。 :before と :after は最も一般的な疑似要素であり、誰もがこれらに精通しているはずです。

:before と :after を簡単に紹介します:

デフォルトの表示: インライン;
content 属性を設定する必要があります。設定しないと無効になります。
デフォルトのユーザー選択: なし、つまり、:before および :after の内容はユーザーが選択できません。
は、存在しないページ要素である dom を通じて使用できません。これらは HTML ソースコード内では見つけることができませんが、視覚的にはその存在を確認できます。

主な使用シナリオを見てみましょう:

文字の挿入

コンテンツを使用して文字を挿入すると、通常、デフォルト値が設定されます。空の要素の場合。入力のプレースホルダー属性と同様に、要素にコンテンツがない場合にのみ表示されます。コードは次のとおりです:

<p>有内容的段落</p>
<p></p>

<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
  content: &#39;空元素内容&#39;;
  color: red;
}

効果は次のとおりです:

CSSで水平線の矢印を実装する方法

#補助要素の生成

#このときの核心は、コンテンツによって生成されるコンテンツではなく、擬似要素そのものです。通常、コンテンツを配置しますプロパティ値は空の文字列に設定され、他の CSS コードはヘルパー要素の生成、グラフィック効果の実現、または特定のレイアウトの実現に使用されます。

グラフィック効果

::after 疑似要素を使用して匿名の置換要素を挿入し、コンテンツを空に設定します。この要素にはコンテンツがない場合は、CSS を通じてスタイルを設定して、目的のグラフィック効果を実現します。コードは次のとおりです。

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: &#39;&#39;;
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}

効果は次のとおりです。

CSSで水平線の矢印を実装する方法

フロートをクリアします

float をクリア主に子要素の float により親要素の内部の高さが 0 になる問題を解決するためのコードです:

<div class="info-box clear">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.clear::after {
 content: &#39;&#39;;
 display: block;
 clear: both;
}

上記 3 つは必須です:

clear: Both: 要素のどちらの側もフローティングにならないようにフロートをクリアします。
display: block: clear は、ブロックレベルの要素にのみ有効です。

要素を追加してフロートをクリアし、要素の高さがサブボックスの高さに適応できるように BFC に触れます。

画像生成

url 関数を使用して直接画像を表示し、テキストの前後に画像を追加したり、テキストを直接置き換えたりすることができます。

画像はテキストを直接置き換えます。コードは次のとおりです:

<p class="img-test">文字</p>

.img-test {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  content: url(&#39;../assets/test2.jpg&#39;);
}

テキストの前後に画像を追加します。コードは次のとおりです:

<!--方案一 -->
.img-test::after {
  content: url(&#39;../assets/test2.jpg&#39;);
}

<!--方案二 -->
.img-test::after {
  content: &#39;&#39;;
  display: block;
  height: 20px;
  width: 20px;
  background: url(&#39;../assets/test2.jpg&#39;);
}

最初のスキームでは、擬似要素がコンテンツを通じて画像を設定します。画像のサイズは変化しません。制御が容易で、表示される画像は元のサイズですが、比較的ぼやけています。一般に、スキーム 2 の背景画像が使用され、必要に応じてサイズを設定できます。

attr 属性値コンテンツの生成

attr を使用して、効果を実現する要素の属性値を取得します。一般に、タグの接続を取得するために使用されます。コードは次のとおりです:

<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>

.baidu-link::after {
  content: " (" attr(href) ") "
}

効果は次のとおりです:

CSSで水平線の矢印を実装する方法

(学習ビデオの共有:

css ビデオチュートリアル , ウェブフロントエンド)

以上がCSSで水平線の矢印を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：es6 にはいくつかの種類のデコレータがあります次の記事：es6 にはいくつかの種類のデコレータがあります

続きを見る