2

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

у меня получилось так:

banner::after, .transport-banner::after {
    content: "";
    border-right: 1px solid #e4e2df;
    position: relative;
    top: -40px;
    left: 100px;
}

введите сюда описание изображения

2 ответа 2

1

.banner {
  position: relative;
  width: 200px;
  height: 100px;
}

.banner::after {
  display: block;
  width: 100%;
  /*какую высоту выставим, такого размера и будет бордер*/
  height: 50px;
  content: "";
  border-right: 1px solid black;
  position: absolute;
  /*а top-OM уже выставлять положение бордера*/
  top: 25px;
  left: 0;
}
<div class="banner">banner</div>

1

.some-banner{
  display: flex;
}
.banner-item{
  position: relative;
  padding: 20px;
}
.banner-item:after{
  content: '';
  display: block;
  border-right: 2px solid red;
  height: 60px;
  position: absolute;
  top: 50%;
  margin-top: -15px;
  right: -1px;
}
/* 
  .banner-item:not(:last-child):after{ Если нужно без последнего after
    content: '';
    display: block;
    border-right: 2px solid red;
    height: 60px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    right: -1px;
  }
*/
<div class="some-banner">
  <div class="banner-item">
    <img src="https://i.mycdn.me/i?r=ATFH4yR_3Vo7iU_-nD1bYWeeCGRm3fig_cX1pJkGgx7jKyCCDx6H11LRhpoEs4OYJOQ" alt="">
  </div>
  <div class="banner-item">
    <img src="https://i.mycdn.me/i?r=ATFH4yR_3Vo7iU_-nD1bYWeeCGRm3fig_cX1pJkGgx7jKyCCDx6H11LRhpoEs4OYJOQ" alt="">
  </div>
  <div class="banner-item">
    <img src="https://i.mycdn.me/i?r=ATFH4yR_3Vo7iU_-nD1bYWeeCGRm3fig_cX1pJkGgx7jKyCCDx6H11LRhpoEs4OYJOQ" alt="">
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.