БЛОГ НА HUSL


CSS. Оформление списка
со счётчиком

Автор вопроса: chbronson

Есть такой пример списка на CodePen Можно ли перенесённый длинный текст в dt выровнять по первой букве первой строки? Чтобы получилось так: https://i.postimg.cc/zfj2y9V4/demo.jpg

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: $body-background-color;
  font-family: $base-font-family;
  font-size: $font-size-small;
  color: $body-text-color;
  line-height: 1.5;
}

.dl-blurbs {
  display: grid;
  @include tablet-up {
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
  }
}


/* LIST */

dl {
  counter-reset: count;
  background: $dl-gradient-right;
  padding-left: 4vw; //default is smartphone
  padding-right: 4vw;
  margin: 0;
  @include tablet-up {
    padding-left: 2vw;
  }
  @include desktop {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
}

dl+dl {
  counter-reset: counter 4;
}

dt {
  counter-increment: count;
  color: $cadet;
  font-family: $base-font-family;
  font-size: 4vw;
  text-transform: uppercase;
}

dt::before {
  content: counter(count, decimal-leading-zero)".";
  font-family: $heading-font-family;
  color: $maximum-blue;
  margin-left: -1vw;
  padding-right: 12px;
}

dd {
  margin-left: 5vw;
  margin-bottom: 2vh;
}
<section class="dl-blurbs">
  <dl>
    <dt>Design</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Develop</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
  <dl>
    <dt>Deliver</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Rinse</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>

    <dt>Repeat</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
</section>


Источник

Ответы (1 шт):

Автор решения: puffleeck

нууу... можно сделать счетчик, который будет вне заголовка, тогда и выравнивать не потребуется

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: $body-background-color;
  font-family: $base-font-family;
  font-size: $font-size-small;
  color: $body-text-color;
  line-height: 1.5;
}

.dl-blurbs {
  counter-reset: count; /*здесь, чтоб без dl+dl{4} работал*/
  display: grid;
  @include tablet-up {
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
  }
}


/* LIST */

dl {
  background: $dl-gradient-right;
  padding-left: 4vw; //default is smartphone
  padding-right: 4vw;
  margin: 0;
  @include tablet-up {
    padding-left: 2vw;
  }
  @include desktop {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
}

dt {
  counter-increment: count;
  color: $cadet;
  font-family: $base-font-family;
  font-size: 4vw;
  text-transform: uppercase;
  display: grid;  /*!!!!!!*/
  grid-template-columns: auto 1fr; /*!!!!!!!*/
}

dt::before {
  content: counter(count, decimal-leading-zero)".";
  font-family: $heading-font-family;
  color: $maximum-blue;
  margin-left: -1vw;
  padding-right: 12px;
  color: darkred;/*-----------*/
  border: 1px solid orange;/*--------*/
}

dd {
  margin-left: 5vw;
  margin-bottom: 2vh;
}
<section class="dl-blurbs">
  <dl>
    <dt>Design DesignDesign DesignDesignDesign DesignDesignDesign</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Develop</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Test</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
  <dl>
    <dt>Deliver</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
    <dt>Rinse</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>

    <dt>Repeat</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</dd>
  </dl>
</section>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.