Как сделать повторение вертикальной рамки css

Question

Я пытаюсь сделать вертикальную рамку l oop без пробелов / пробелов, но не могу повторить. Я добавил aria-hidden="true", который работал с моей горизонтальной рамкой, но, похоже, на этот раз это не исправление.

вот кодовая ручка с рамкой: https://codepen.io/theomarusman/pen/oNbBgej

это пробел, который я хочу удалить

Изменить: теги row и col бесполезны. Я использую код из другой области, чтобы сделать это, и я использовал его. подряд и столбец

Answer 1

/* Please try this instead */

body {
	background-color: black;
}

.side-bar {
	top: 0;
	left: 0;
	height: 100%;
	color: white;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
}

.marquee p {
	overflow: hidden;
	white-space: nowrap;
	height: 100%;
}

.marquee span {
	animation: marquee 8s linear infinite;
	display: inline-flex;
	padding-right: 10px;
	font-size: 4rem;
}

@keyframes marquee {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

    <div class="position-fixed side-bar">
      <div class="row marquee">
        <div class="col-12 bg-white">
          <p class="m-0 p-0 p-3">
            <span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
            <span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
            <span class="m-0 p-0" aria-hidden="true">USE CODE "MLT"</span>
          </p>
        </div>
      </div>
    </div>

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

Этот код изменяется на следующий.

.marquee p{
  overflow: hidden;
  white-space: nowrap;
  height:100%;
}

@keyframes marquee {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

Решено в кодовом поле

https://codepen.io/Rayeesac/pen/OJMWMpm

Дополнительные примеры:

Горизонтальная область выделения без пробелов и JS

Вертикальная область выделения без пробелов и JS