cssで一番上の行をテキストの一番下に移動する方法

debugcn 投稿 Dev

Meo Dows

写真の下に表示されているように、最初の円から2番目の円に線を移動するcssまたはhtmlに問題があります。以下に示すように、JSfiddleのバージョンを投稿しました。

JSFiddleコード：

HTML：

<section  id="intro" class="workhide">
  <div class="content_section with_border">
    <div  class="content"><span  class="label">Werk</span>
      <h1>
        Zo trots als een hond met zeven staarten. <br > Ben ik op mijn werk. Denk jij nu: 'Dat wil ik ook!'?<br > mail mij!
      </h1>
    </div>
  </div>
</section>

CSS：

.content_section.with_border:before {
    content: "";
    width: 10%;
    display: block;
    height: 2px;
    left: 0;
    top: 24px;
    position: absolute;
    background: #1d1b22;
    clear: both;
}

.content_section.with_border .label {
    position: relative;
    clear: both;
}

h1, h2 {
    font-weight: 800;
    font-size: 1.60714em;
    line-height: 1.24444em;
    margin: 0 0 .64286em;
}

.content_section.with_border .content {
    padding: 0 11%;
    clear: both;
}

.content_section .label {
    font-size: .5em;
    text-transform: uppercase;
    font-weight: 800;
}

誰かがそれを解決する方法を知っていますか？

タキット・イジー

コメント付きの作業スニペットは次のとおりです。

/* Added */
.content_section.with_border {
  position: relative;
}

.content_section.with_border:before {
  content: "";
  width: 10%;
  display: block;
  height: 2px;
  left: 0;
  bottom: -4px; /* modified top -> bottom, value can be modified to adjust position */
  position: absolute;
  background: #1d1b22;
  clear: both;
}

.content_section.with_border .label {
  position: relative;
  clear: both;
}

h1,
h2 {
  font-weight: 800;
  font-size: 1.60714em;
  line-height: 1.24444em;
  margin: 0 0 .64286em;
}

.content_section.with_border .content {
  padding: 0 11%;
  clear: both;
}

.content_section .label {
  font-size: .5em;
  text-transform: uppercase;
  font-weight: 800;
}

<section id="intro" class="workhide">
  <div class="content_section with_border">
    <div class="content"><span class="label">Werk</span>
      <h1>
        Zo trots als een hond met zeven staarten. <br> Ben ik op mijn werk. Denk jij nu: 'Dat wil ik ook!'?<br> mail mij!
      </h1>
    </div>
  </div>
</section>

それが役に立てば幸い！

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]