HTMLのアコーディオン毎の余白を変更したい

Question

HTMLでQAリストとしてアコーディオンを作りたく、実装自体はできているのですが、いくつか分からないことがあり質問します。

それぞれのコードが

    <div class="qa-list mts">
      <dl class="qa">
        <dt>タイトル１</dt>
        <dd>
          <p>内容１</p>
        </dd>
      </dl>
      <dl class="qa">
        <dt>タイトル２</dt>
        <dd>
          <p>内容２</p>
        </dd>
      </dl>
    </div>

.qa-list dl {
  position: relative;
  margin: 30px 0 0;
  cursor: pointer;
  border: 1px solid #DDD;
  border-width:2px 0px 2px 0px;
}

.qa-list dl:first-child {
  margin-top: 0;
}

.qa-list dl::after {
  position: absolute;
  top: 27px;
  right: 26px;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transform: rotate(135deg);
  border-top: 2px solid #000;
  border-right: 2px solid #000;
}

.qa-list .open::after {
  transform: rotate(-45deg);
}

.qa-list dl dt {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
  font-weight: bold;
  background: #FFF;
}

.qa-list dl dt::before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  content: 'Q.';
  color: #C59C45;
}

.qa-list dl dd::before {
  font-size: 22px;
  line-height: 1;
  position: absolute;
  left: 20px;
  display: block;
  content: 'A.';
  font-weight: bold;
  color: #5DADBB;
}

.qa-list dl dd {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
    background: #f1f1f1;
}

.qa-list dl dd p {
  margin: 30px 0 0;
}

.qa-list dl dd p:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .qa-list dl {
    margin: 10px 0 0;
  }
  .qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
  }
  .qa-list dl dt {
    padding: 16px 16px 16px 50px;
    font-size: 14px;
  }
  .qa-list dl dt::before {
    font-size: 14px;
    top: 20px;
    left: 20px;![![イメージ説明](cb383e735848d9dd7bf7cfa9a912224a.png)](eaea7c9d07010e9915bcbdef42e63db5.png)
  }
  .qa-list dl dd::before {
    font-size: 14px;
    left: 20px;
    margin-top: 5px;
  }
  .qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 50px;
    font-size: 14px;
  }
  .qa-list dl dd p {
    margin: 30px 0 0;
  }
  .qa-list dl dd p:first-child {
    margin-top: 0;
  }
}

window.addEventListener('DOMContentLoaded', function(){
  $(".qa-list dd").hide();
  $(".qa-list dl").on("click", function(e){
    $('dd',this).slideToggle('fast');
    $(this).toggleClass('open');
  });
});

このようなコードになっており、表示すると

このようになってしまいます。

• それぞれの幅をゼロにしてタイトル１の下線がタイトル２の上部の線になるように変更したいです。

また、

• 「Q」の文字を同様のサイズ感の画像を挿入したいのですが、それについてもどのように変更したらいいのでしょうか？

CSSが覚束なく、どれを変更したらいいのか分からず教えて頂けませんでしょうか？
よろしくお願いいたします。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、スクリーンショットのようになりませんでした。
もしかして、JavaScriptを使っていませんか？

[tuntun]

JS使用しています。コードを追加いたしました

Answer 1

下記でどうでしょう。

.qa-list dl {
  position: relative;
/*  margin: 30px 0 0; 削除 */
  margin: 0; /* 追加 */
  cursor: pointer;
  border: 1px solid #DDD;
  border-width:0px 0px 2px 0px;
}

.qa-list dl:first-child {
/*  margin-top: 0; */
    border-width:2px 0px 2px 0px;
}

/* 以下略 */

Answer 2

こんばんは。

以下のような感じではどうですか？

それぞれの幅をゼロにしてタイトル１の下線がタイトル２の上部の線になるように変更したいです。

.qa-list dl {
	position: relative;
    /* margin: 30px 0 0; */ margin: 0;
	cursor: pointer;
	border: 1px solid #DDD;
	border-width: 2px 0px 2px 0px;
}

---

「Q」の文字を同様のサイズ感の画像を挿入したいのですが、それについてもどのように変更したらいいのでしょうか？

.qa-list dl dt::before {
	content: url(【画像URL】);
}