文字列にbeforeを当てて別の文字列を指定したのですが

縦に並んでいるのですが、縦方向に空白が空いていました。
これはbeforeの仕様なのでしょうか。
また、この空白を狭めたいときに、before要素に対してマイナスマージンとしてmargin-bottomを指定するのは適切な書き方でしょうか。

<html>

<head>
  <meta charset="utf-8">
  <title>ABC</title>
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="./base.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
  <link rel="stylesheet" href="./common.css">
  <link rel="stylesheet" href="./top.css">
  <link rel="stylesheet" href="./sample.css">
</head>

<body>


  <main>

    <div class="top_title_container">
      <div class="top_title_name">
        <span class="top_title_main_name">aaaaaaaaaaaaaaaaa</span>
      </div>
    </div>
  </main>

</body>

</html>

.top_title_main_name{
    font-size: 72px;
    color: #FFD700;
    text-align: left;
    font-family: serif;
  }
  .top_title_main_name:before{
    content: "bbbbbbbbbbbbbbbbbbbbbbb";
    display: block;
    font-size: 24px;
    font-weight: bold;  
    font-family: serif;
    color: #330000;
    text-align: left;
    margin-bottom: -16px
  }

kei344

2017/09/18 01:32

書かれている状況が再現するコード（HTML/CSS）を提示されたほうが回答を得やすいと思います。

tokyodesk

2017/09/18 02:10

ご回答ありがとうございます。先ほどコードを記載しました。

kei344

2017/09/18 02:13

もしかして質問内容をエディタで作ってコピー＆ペースしていませんか？teratail のバグで記述内容が表示されないというものが以前有ったので、ペースト後に何文字か記入してみてください。

tokyodesk

2017/09/18 02:38

失礼しました。変更概要を空白にしたため「更新する」を押しても反映されなかったようです。本題なのですが、自分で検証してみたところ文字フォントサイズが大きいのが原因のようです。これは疑似要素は関係なく、HTMLの仕様で仕方がない現象なのでしょうか。またマイナスマージンで調整しようと思っているのですが、これは適切な対処方法なのでしょうか。

kei344

2017/09/18 02:42

CSSが提示されていませんので、状況を再現できません。また、「testetstetest」など不要な記述が残っているようです。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

tokyodesk

2017/09/18 02:48

何度もすみません。CSSを加えて修正しました。お願いします。