HTML/CSS 2017.09.17

CSS：FAQなどのリストで文字を下げる

通常の2行目以降のインデント下げは以下。

p.memo {
  padding-left: 1em;
  text-indent: -1em;
}

p.memo {

padding-left: 1em;

text-indent: -1em;

}

ただ、これでは3行目以降がうまくいかないし
FAQなどのリストの場合も不便。

CSSで2行目以降の文字を下げて、FAQを作る

イメージはこんな感じ。

<ul>
<li class="qus">質問があります。</li>
<li class="ans">回答があります。</li>
</ul>

質問があります。

回答があります。

ul.faq_list {
    padding: 10px 0 20px;
}
ul.faq_list li{
    margin-bottom: 20px;
    padding-left: 45px;
}
ul.faq_list li.qus {
    font-weight: bold;
}
ul.faq_list li.qus::before ,
ul.faq_list li.ans::before {
    border-radius: 4px;
    display: inline-block;
    font-size: 18px;
	font-weight: bold;
    line-height: 32px;
    margin: 0 6px 0 -40px;
    text-align: center;
    border-radius: 18px;
    padding: 0px 11px 3px;
    font-weight: bold;
}
ul.faq_list li.qus::before {
    background-color: #2da338;
	color: #fff;
    content: "Q";
}
ul.faq_list li.ans::before {
    background-color: #fff;
	border:1px solid #2da338;
	color: #2da338;
    content: "A";
}

ul.faq_list {

padding: 10px 0 20px;

}

ul.faq_list li{

margin-bottom: 20px;

padding-left: 45px;

}

ul.faq_list li.qus {

font-weight: bold;

}

ul.faq_list li.qus::before ,

ul.faq_list li.ans::before {

border-radius: 4px;

display: inline-block;

font-size: 18px;

font-weight: bold;

line-height: 32px;

margin: 0 6px 0 -40px;

text-align: center;

border-radius: 18px;

padding: 0px 11px 3px;

font-weight: bold;

}

ul.faq_list li.qus::before {

background-color: #2da338;

color: #fff;

content: "Q";

}

ul.faq_list li.ans::before {

background-color: #fff;

border:1px solid #2da338;

color: #2da338;

content: "A";

}

ただ、文字をpxで指定するなどガチガチなので、ご自信で改変してくださいませ。