Html Question posted in
Some basic documentation can be found here.

Html – CSS Accordion ::after Arrow Merges with Label Text as Screen Gets Small

I have a css only, checkbox based accordion that works fine, except for some lengths of label text as the screen gets narrower, the arrow merges into the label text as shown in image below for "What is the weather like in Iquitos?"

enter image description here

Any idea how to keep this from happening? I have tried for a couple of hours, but have not found a fix.

/* Core styles/functionality */

.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
  margin-top: 0px;
}

.tab input:checked~.tab__content {
  max-height: 30rem;
  background-color: rgba(9, 221, 9, 0.12);
}


/* Visual styles */

.accordion-section {
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
}

.tab__label,
.tab__close {
  display: flex;
  color: #249e34;
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(1.13rem, 0.67vw + 0.92rem, 1.5rem);
}

.tab__label {
  justify-content: space-between;
  padding-right: 0.3125rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.tab__label::after {
  content: "❯";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}

.tab input:checked+.tab__label::after {
  transform: rotate(270deg);
}

.tab__content p {
  margin: 0;
  padding: 1rem;
}

.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
<section class="accordion-section">
  <div class="tab">
    <input type="checkbox" name="accordion-1" id="cb6">
    <label for="cb6" class="tab__label">Can you support special diets?</label>
    <div class="tab__content">
      <p>Removed for space</p>
    </div>
    <div class="tab">
      <input type="checkbox" name="accordion-1" id="cb7">
      <label for="cb7" class="tab__label">What is the weather like in Iquitos?</label>
      <div class="tab__content">
        <p>Removed for space</p>
      </div>
      <div class="tab">
        <input type="checkbox" name="accordion-1" id="cb8">
        <label for="cb8" class="tab__label">Is laundry service available?</label>
        <div class="tab__content">
          <p>Removed for space</p>
        </div>
</section>
Tags:

2

Answers


  1. 0

    Here is a simple example of how to apply flexbox:

    .accordion-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    border: solid 1px #eee;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    &:after {
      content: '';
      flex: none;
      width: 24px;
      height: 24px;
      background-image:url(data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1jYXJldC1kb3duIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNNiAxMGw2IDZsNiAtNmgtMTIiIC8+PC9zdmc+);
  }
}
    <a href="#" class="accordion-toggle">Question</a>
    Login or Signup to reply.
  2. 0

    Seems like you just need to give the ::after element a bit more height so it can be accommodated. I would maybe add a flex gap to the container as well. Overall, I would recommend just using a standard HTML element over a pseudo element like this.

        /* Core styles/functionality */
    .tab input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
    
    .tab__content {
      max-height: 0;
      overflow: hidden;
      transition: all 0.35s;
      margin-top: 0px;
    }
    
    .tab input:checked ~ .tab__content {
      max-height: 30rem;
      background-color: rgba(9, 221, 9, 0.12);
    }
    
    /* Visual styles */
    .accordion-section {
      width: 100%;
      max-width: 1200px;
      overflow: hidden;
    }
    
    .tab__label,
    .tab__close {
      display: flex;
      color: #249e34;
      cursor: pointer;
      font-weight: 600;
      font-size: clamp(1.13rem, 0.67vw + 0.92rem, 1.5rem);
    }
    
    .tab__label {
      justify-content: space-between;
      padding-right: 0.3125rem;
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
    }
    
    .tab__label::after {
      content: "❯";
      width: 1em;
      height: 1.4em; // Added more height
      text-align: center;
      transform: rotate(90deg);
      transition: all 0.35s;
    }
    
    .tab input:checked + .tab__label::after {
      transform: rotate(270deg);
    }
    
    .tab__content p {
      margin: 0;
      padding: 1rem;
    }
    
    .tab__close {
      justify-content: flex-end;
      padding: 0.5rem 1rem;
      font-size: 0.75rem;
    }
    
    
    
    
    
    <section class="accordion-section">

  <div class="tab">
<input type="checkbox" name="accordion-1" id="cb6">
<label for="cb6" class="tab__label">Can you support special diets?</label>
<div class="tab__content">
  <p>Removed for space</p>
</div>
  </div>

<div class="tab">
  <input type="checkbox" name="accordion-1" id="cb7">
  <label for="cb7" class="tab__label">What is the weather like in Iquitos?</label>
  <div class="tab__content">
    <p>Removed for space</p>
  </div>
</div>

  <div class="tab">
    <input type="checkbox" name="accordion-1" id="cb8">
    <label for="cb8" class="tab__label">Is laundry service available?</label>
    <div class="tab__content">
      <p>Removed for space</p>
    </div>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search