コンテンツの前に記号や番号をつける　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:”　このあいだに表示したい記号や文字を入れます　” カラーやフォントサイズなどを指定することもできます。   以下のように番号をふりたい場合

１．コンテンツの前に番号をつけるには

２．質問の前に番号をつけるには

３．答えの前に番号をつけるには

 

.no li:before{counter-increment:no;
content:counter(no) ". "; 
font-size: 30px; color: #dd7423;
}
ul.no {counter-reset:no;}

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

padding-left: 1em;
text-indent: -1em;