コンテンツの前に記号や番号をつける CSS

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
 
  コンテンツの前に記号や番号をつける CSS

コンテンツの前に記号や番号をつける CSS

:before擬似要素を使ってコンテンツの前に記号や番号を表示させます!

  :before擬似要素をつかえば、例えばタイトルの前に「★」を入れたり、Q&AでQ1、Q2といったように番号をつけたりすることができます。  

<h1 class=”entry__title”>コンテンツの前に記号や番号をつける CSS</h1>

 

h1.entry__title:before { content: “■”; color: #910505; padding-right: 10px; font-size: 23px; }

  この場合、 h1.entry__title が要素名 その直後に :before  を記載してCSSを書きます。 content: “■”; content:” このあいだに表示したい記号や文字を入れます ” カラーやフォントサイズなどを指定することもできます。   以下のように番号をふりたい場合

1.コンテンツの前に番号をつけるには

2.質問の前に番号をつけるには

3.答えの前に番号をつけるには

 

意味 #faqのなかのp.faq-titleに順番をつける。順番を表示する場所はnoのとこ   .faq-title:before { content: “Q” counter(no) “. “; font-size: 30px; color: #826454; } 意味 .faq-titleの前にQ、そして順番を表示 フォントサイズは30px カラーは#826454

 

 

 

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報