0

Как заставить псевдоэлемент ::before, привязанный к .main__question_image автоматически продлеваться с добавлением каждого последующего элемента списка li.

  body {
    background-color:#f0f0f0;
    color: grey;
}
img {
    position: relative;
    width: 50px;
    height: 50px;
    float: left;
    
}
span {
    font-weight: bold;
}
li {
    list-style-type: none;
    margin-top: 10px;
    margin-bottom: 20px;
    
}
p {
    padding: 10px;
    margin: 0;
}
.chat {
    width: 50%;
    margin:0 auto;
}

.main__question {
    position: relative;
    
    
}
.main__question_image {
    position: relative;
    margin-left: -10px;
    
    
}
.main__question_image::before{
    content: "";
    border-left: 1px solid grey;
    height: 410px;
    position: absolute;
    left:25px;
   
    top: 0;
}
.main__question_text {
    margin: 0 60px;
    background-color: white;
    border-radius: 5px;
    border: 1px solid grey;
    width:570px;
}
.border{
    border:1px solid grey;
   } 

.main__answers_images {
    margin: -2px 60px;
    position:absolute;
}
.main__answers_text {
    margin: 20px 130px;
    background-color: white;
    border-radius: 5px;
    border: 1px solid grey;
    position: relative;
    width:500px;
    height:auto;
}
.clear {
    clear: left;
}
.main__answers_images::before {
    content: "";
    width: 40px;
    height: 1px;
    background-color: grey;
    position: absolute;
    left: -45px;
    top: 26px;
}
.main__answers_images::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px;
  border-color: transparent transparent transparent grey;
}
<body>
    <ul class="chat">
        <li class="main__question">
            <div class="main__question_image">
                <img class="border" src='img/pika.png'>
            </div>
            
            <div class="main__question_text">
                <p><span>Pikachu</span> спрашивает:</p>
                <p>Почему во многих макетах и текстовых заданиях используется текст &laquo;Lorem ipsum dolor sit amet&raquo;???</p>
            </div>
         
            <div class="clear"></div>
        </li>
        <li class="main__answers">       
                <div class="main__answers_images">
                    <img class="border"src="img/cat.png">
                </div>
                <div class="main__answers_text">
                    <p><span>Kitty</span> отвечает:</p>
                    <p>Аннотация</p>
                    <p>Фраза &laquo;Lorem ipsum dolor sit amet consectetuer&raquo; впервые появилась в справке Microsoft Word. Фраза производит впечатление осмысленной латинской поговорки. На самом деле это не так.</p>
                </div> 
                <div class="clear"></div>
        </li>
        <li class="main__answers">
            <div class="main__answers_images">
                <img class="border" src='img/monster.png'>
            </div>
                <div class="main__answers_text">
                    <p><span>Cookie Monster</span> отвечает:</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                
                </div> 
                <div class="clear"></div>
        </li>    
        <li class="main__answers">    
                <div class="main__answers_images">
                    <img class="border" src='img/bob.png'>
                </div>
                <div class="main__answers_text">
                <p><span>SpongeBob</span> отвечает:</p>
                <p>Хотя фраза и бессмысленна, она имеет давнюю историю. Фраза использовалась печатниками многие столетия для демонстрации наиболее важных особенностей своих шрифтов. Она использовалась потому, чот символы составляют сложные по межсимвольным промежуткам и по комбинациям символов пары, наилучшим образом демонстрирующие преимущества данного начертания.</p>
            </div> 
           
                    <div class="clear"></div>
            </li>    
            
            <div class="clear"></div>
        </li>
        </ul>
    </body>

1 ответ 1

0

сделай ему height не фиксированый а 100% если нужно меньше/больше 100 либо контейнер подгоняй либо height: calc(100% +/- Xpx)

2
  • не очень понятно( 11 сен 2020 в 12:53
  • .main__question_image::before { height: 100%; /* height: calc( 100% - 20px); если нужно на 20px меньше */ }
    – No_Name
    11 сен 2020 в 13:07

Ваш ответ

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

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