Непрозрачность inline-блока

Question

Я хочу показать несколько текстовых блоков, сначала просто показывая заголовок и несколько строк, а после нажатия на тег «more» показать все или скрыть снова. Я использовал хитрость CSS скрытого флажка и метки, и это выглядело почти правильно.

label {
        width: 50%;
    	border-radius: 5px;
    	background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
    	cursor: pointer;
    }
    label:after {
        content: "see more...";
        margin-left: 1%;
        font-style: italic;
        font-weight: bold;
        font-size: smaller;
    }
    .lbl1 {
    	// display:inline-block;
        padding-top: 40px;
    	color: white;
        font-style: italic;
    }
    input[id^="more"] {
        display: none;
    }
    input[id^="more"]:checked ~ .lbl1:after {
        content: "show less";
    }
    input[id^="more"]:checked ~ .arttxt1{
        height: 100%;
    }
    .arttxt1{
    	margin-left:1%;
    	width: 50%;
    	margin-bottom:2px;
    	line-height: 2.5ex;
    	height: 8.4ex; /* 2.5ex for each visible line */
        overflow: hidden;
    }

<article>
  <h1>De regels</h1>
  <input id='more20' type='checkbox'/>
  <div class='arttxt1'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <label for='more20' class='lbl1'>&nbsp;</label>
</article>

Метка, по которой нужно щелкнуть, имела ширину текста, тогда как я хотел, чтобы она растягивалась по всей ширине. Поиск предложил добавить 'display: inline-block', что я и сделал. Это действительно растянуло ярлык на всю ширину, но я также потерял прозрачность: он как бы лежит перед текстом. Я пытался и искал, но не мог найти правильное решение Надеюсь, кто-нибудь может мне помочь.

Answer 1

Вы хотите этого эффекта?используя отрицательное поле для перемещения div вверх

label {
  width: 50%;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 128, 0.7) 100%);
  cursor: pointer;
}

label:after {
  content: "see more...";
  margin-left: 1%;
  font-style: italic;
  font-weight: bold;
  font-size: smaller;
}

.lbl1 {
  display: inline-block;
  padding-top: 40px;
  color: white;
  font-style: italic;
  margin-top: -40px;
  padding-left: 1%;
}

input[id^="more"] {
  display: none;
}

input[id^="more"]:checked~.lbl1:after {
  content: "show less";
}

input[id^="more"]:checked~.arttxt1 {
  height: 100%;
}

.arttxt1 {
  margin-left: 1%;
  width: 50%;
  margin-bottom: 2px;
  line-height: 2.5ex;
  height: 8.4ex;
  /* 2.5ex for each visible line */
  overflow: hidden;
}

<article>
  <h1>De regels</h1>
  <input id='more20' type='checkbox' />
  <div class='arttxt1'>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <label for='more20' class='lbl1'>&nbsp;</label>
</article>

Answer 2

Чтобы уточнить, прозрачность не теряется - на самом деле происходит то, что, поскольку ваш <div class="arttxt1"> является элементом блока, метка перемещается вниз под текст.

Таким образом, вы можете либо использовать margin-top в соответствии с ответом Криса Ли, либо position:relative и top, чтобы поднять ярлык поверх текста.

label {
        width: 50%;
    	border-radius: 5px;
    	background: linear-gradient(to bottom, rgba(255,255,255,0.0) 0%, rgba(0,0,128,0.7) 100%);
    	cursor: pointer;
    }
    label:after {
        content: "see more...";
        margin-left: 1%;
        font-style: italic;
        font-weight: bold;
        font-size: smaller;
    }
    .lbl1 {
    	display:inline-block;
        padding-top: 40px;
    	color: white;
        font-style: italic;
        position:relative;
        top: -40px;
    }
    input[id^="more"] {
        display: none;
    }
    input[id^="more"]:checked ~ .lbl1:after {
        content: "show less";
    }
    input[id^="more"]:checked ~ .arttxt1{
        height: 100%;
    }
    .arttxt1{
    	margin-left:1%;
    	width: 50%;
    	margin-bottom:2px;
    	line-height: 2.5ex;
    	height: 8.4ex; /* 2.5ex for each visible line */
        overflow: hidden;
    }

<article>
  <h1>De regels</h1>
  <input id='more20' type='checkbox'/>
  <div class='arttxt1'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <label for='more20' class='lbl1'>&nbsp;</label>
</article>