html - 行内 block 的不透明度

Question

我想显示一些文本 block ，首先只显示标题和几行，然后在单击“更多”标签后显示全部，或再次隐藏。我使用了隐藏复选框和标签的 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>

要点击的标签只有文本的宽度，而我希望它在整个宽度上拉伸(stretch)。搜索建议添加我所做的“显示:内联 block ”。它确实将标签拉伸(stretch)到整个宽度，但我也失去了透明度:它有点位于文本的前面。我尝试并进行了搜索，但找不到合适的解决方案。希望有人能帮助我。

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>