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

Question

Я все еще учусь css, поэтому я немного экспериментирую с анимацией и тому подобным. Прямо сейчас я пытаюсь создать «панель умений», в которой в данном случае будут перечислены языки программирования и развернуты по горизонтали, чтобы показать процентное соотношение, когда окно зависло. У меня есть список прямо сейчас, и он расширяется так, как я хочу, однако я не совсем уверен, как на самом деле создать скрытый текст. Я уверен, что есть гораздо лучший способ сделать это, но я пытался использовать flex-box, чтобы выровнять столбцы, и сделать так, чтобы поля расширялись по процентам, чтобы показывать их таким образом. Но я не учел тот факт, что расширяющийся флексбокс просто отодвинет другой столбец от него

Вот что я получил до сих пор:

                        <div class="pointer-container">

                            <div class="pointer">Proficient Languages</div>

                            <div class="skills">
                                <div class="banner-container">
                                    <div class="banner">HTML</div>
                                    <div class="banner">CSS</div>
                                    <div class="banner">PHP</div>
                                    <div class="banner">JavaScript</div>
                                    <div class="banner">React Native</div>
                                    <div class="banner">Java</div>
                                    <div class="banner">C#</div>
                                </div>

                                <div class="levels">
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                    <p>%</p>
                                </div>

                            </div>
                       </div>

И мой css:

.pointer-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.skills{
    display: flex;
    flex-direction: row;
}

/*shape banners and style text inside*/
banner{
    width: 150px;
    height: 40px;
    position: relative;
    background: #00a6ff;
    text-align: left;
    padding-top: 8px;
    padding-left: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
    transition: width 2s;
    transition-timing-function: ease;
}

.banner:hover {
    width: 400px;
}

/*give shape to the pointer header*/
.pointer {
    width: 600px;
    height: 40px;
    position: relative;
    background: #00a6ff;
    text-align: center;
    padding-top: 8px;
    margin-bottom: 10;
}

.pointer:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

.pointer:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid #00a6ff;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

извините, если это немного грязно, но любая помощь будет оценена! Спасибо!

Answer 1

Я бы переставил ваше HTML примерно так:

<div class="skills">
  <div class="banner-container">
    <div class="banner">
      <span class="skill">HTML</span><span class="level">%</span>
      <span class="skill">CSS</span><span class="level">%</span>
      <!-- etc -->
    </div>
  </div>
</div>

тогда ваш CSS может быть:

.level {
 display: none;
}

.banner:hover .level {
  display: inline-block; /* or whatever */
}

Это также имеет смысл семантически, верно? Название вашего навыка и то, насколько вы искусны с ним, отчасти связаны друг с другом.