Чистое решение CSS для динамического добавления нескольких теней ящиков

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

Я использовал следующий CSS для этого:

h1{
    box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF, 0 6px 0px #276FBF, 0 8px 0px 0px #FFF, 0 10px 0px #AF5B5B;
    float: left;
}

Однако я хотел бы добиться эффекта, чтобы включить и выключить определенные подчеркивания по мере необходимости. Поэтому я придумал это и добавил классы в свой HTML:

h1{
    float: left;
}
.red{
    box-shadow: 0 2px 0px 0px #F03A47, 0 4px 0px 0px #FFF;
}
.blue{
    box-shadow: 0 6px 0px #276FBF, 0 8px 0px 0px #FFF;
}
.brown{
    box-shadow: 0 10px 0px #AF5B5B, 0 12px 0px 0px #FFF;
}

Но эффект, который он произвел, был следующим:

Я попытался добавить классы в разные порядки, а также добавить их динамически с помощью JavaScript, но я все равно получаю тот же результат. Я что-то делаю неправильно, или есть альтернативный способ достижения эффекта включения-выключения?

Ответ 1

Интересный способ с использованием <span>:)

Вы можете добавить столько <span>, сколько хотите, и просто расширить палитру цветов в CSS:

.borders {
  display: inline-block;
}
.borders span {
  display: block;
  height: 2px;
  margin: 2px;
}
.borders span:nth-child(1) { background: red; }
.borders span:nth-child(2) { background: blue; }
.borders span:nth-child(3) { background: green; }
/* Add more here */

<h1 class="borders">
  Hi there
  <span></span>
  <span></span>
  <span></span>
</h1>

Ответ 2

Это можно сделать с помощью псевдоэлементов:

h1 {
  display:inline-block;
  border-bottom:2px solid #e8353b;
  position:relative;
}
  h1:before {
    content:"";
    height:2px;
    width:100%;
    background:#2762be;
    display:block;
    position:absolute;
    bottom:-6px;
  }
  h1:after {
    content:"";
    height:2px;
    width:100%;
    background:#a3514f;
    display:block;
    position:absolute;
    bottom:-10px;
  }

<h1>Hello there</h1>

Ответ 3

Вы можете использовать linear-gradient, который будет полностью прозрачным.

Обратите внимание, что когда вы комбинируете классы, они не объединяют эти значения, последний набор свойств в элементе будет перезаписывать все предыдущие, независимо от того, установлены ли они в классах с разными именами или нет, поэтому ваша строка становится все коричневой.

body {
  background: lightgray
}

h1{
    float: left;
    padding-bottom: 8px;
    background-size: 100% 2px;                         /* thickness 2px */
    background-repeat: no-repeat;
    background-position: 
      left bottom, left bottom 4px, left bottom 8px;   /* gutter 2px */ 
    background-image:
      linear-gradient(to right, blue, blue),           /* bottom line */
      linear-gradient(to right, green, green),         /* middle line */
      linear-gradient(to right, red, red);             /* top line */
  }
  
h1.red{
    background-image:
      linear-gradient(to right, blue, blue), 
      linear-gradient(to right, green, green),      
      linear-gradient(to right, transparent,transparent);
}
h1.blue{
    background-image:
      linear-gradient(to right, transparent,transparent),
      linear-gradient(to right, green, green),      
      linear-gradient(to right, red, red);      
}
h1.green{
    background-image:
      linear-gradient(to right, blue, blue), 
      linear-gradient(to right, transparent,transparent),
      linear-gradient(to right, red, red);      
}

<h1>Hello there</h1>

<h1 class="green">Hello there</h1>

<h1 class="red">Hello there</h1>

<h1 class="blue">Hello there</h1>

Ответ 4

На самом деле вы можете сделать это только с одним псевдоэлементом.

Вот что я сделал (с комментариями о том, как управлять расстояниями):

h1 {
    display: inline-block;
    /* controls the last line */
    border-bottom: 2px solid #a3514f;
}

h1:after {
    content: "";
    display: block;
    /* controls space between 1st and 2nd line */
    height: 2px;
    width: 100%;
    /* controls space between 2nd and 3rd line */
    margin-bottom: 2px;
    border-bottom: 2px solid #2762be;
    border-top: 2px solid #e8353b;
}

<h1>Hello there</h1>

Ответ 5

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

Каждый класс добавляет новую строку.

*,
*:before,
*:after {
  box-sizing: border-box;
}
h1 {
  display: inline-block;
  padding-bottom: 2px;
  position: relative;
}
h1:before,
h1:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  bottom: -10px;
}
h1:after {
  bottom: -18px;
}
.one {
  border-bottom: 2px solid red;
}
.two:before {
  border-top: 2px solid blue;
}
.three:before {
  border-bottom: 2px solid green;
}
.four:after {
  border-top: 2px solid brown;
}
.five:after {
  border-bottom: 2px solid orange;
}

<h1 class="one two three four five">Lorem ipsum</h1>

Ответ 6

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

Вы получаете до 9 строк, которые могут быть установлены/не установлены с 9 независимыми классами.

Некоторые из них будут работать только против твердого, известного фонового цвета (белый в этом случае)

.base {
  font-size: 60px;
  position: relative;
  display: inline-block;
}

.base:before,
.base:after {
  content: "";
  position: absolute;
  left: 0px;
  width: 100%;
  height: 10px;
  padding: 10px 0px;
  background-clip: content-box;
}

.base:before {
  bottom: -90px;
}
.base:after {
  bottom: -170px;
}

.a {
  border-bottom: solid 10px lightgreen;
}

.b {
  box-shadow: 0px 10px white, 0px 20px green;
}

.c:before {
  border-top: solid 10px lightblue;
}

.d:before {
  background-color: red;
}

.e:before {
  border-bottom: solid 10px yellow;
}

.f:before {
  box-shadow: 0px 10px white, 0px 20px green;
}

.g:after {
  border-top: solid 10px tomato;
}

.h:after {
  background-color: magenta;
}

.i:after {
  border-bottom: solid 10px gray;
}

.j:after {
  box-shadow: 0px 10px white, 0px 20px brown;
}

<h1 class="base a b c d e f g h i j">Hello world</h1>