CSS3でページにコンテンツを挿入する方法

PHP中文网
リリース: 2017-06-22 11:38:13
オリジナル
2055 人が閲覧しました

セレクターを使用してコンテンツを挿入します

h2:before{
  content:"前缀";
}
h2:after{
  content:"后缀";
}
ログイン後にコピー

B 挿入しない個別要素を指定する

h2.sample:before{
  content:none;
}
ログイン後にコピー

2. 画像を挿入する

A タイトルの前に画像ファイルを挿入します

h2:before{
  content:url(anwy.jpg);
}
ログイン後にコピー

B alt 属性の値を画像のタイトルとして表示します (未使用)

img:after{
  content:attr(alt);
  display:block;
  text-align:center;
  margin-top:5px;
  font-size:11px;
  font-weight:bold;
  color:black;
}
ログイン後にコピー

3. 番号を挿入

A 複数のタイトルの前に連番を追加します

p:before{
  content:counter(pCounter);
}
p{
  counter-increment:pCounter;
}
ログイン後にコピー

B 箇条書きにテキストを追加

p:before{
  content:"第"counter(pCounter)"段";
}
ログイン後にコピー

C 番号のスタイルとタイプを指定します

p:before{
  content:counter(pCounter,upper-alpha)'.';
  color:blue;
  font-size:16px;
}
ログイン後にコピー

D 番号の入れ子

p:before{
  content:counter(pCounter,upper-alpha)'.';
  color:blue;
  font-size:16px;
}
p{
  counter-increment:pCounter;
  counter-reset:subDivCounter;
}
p:before{
  content:counter(subDivCounter)'.';
  margin-left:15px;
 
  font-size:12px;
}
p{
  counter-increment:subDivCounter;
}
ログイン後にコピー

E. stringの両側にあるテキストdot|ローマ字小文字

|数字

小文字大文字英語文字|継承継承

以上がCSS3でページにコンテンツを挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!