:target伪类与显示全部文章内容实例页面

展示

代码

• HTML：

  文章内容，文章内容，文章内容，文章内容，文章内容，文章内容，文章内容……
  <div id="articleMore" hidden></div>
  <a href="#articleMore" class="cs-button" data-open="true">阅读更多</a>          
  <p class="cs-more-p">更多文章内容，更多文章内容，更多文章内容，更多文章内容。</p>
  <a href="##" class="cs-button" data-open="false">收起</a>

• CSS：

  .cs-more-p,
  [data-open=false] {
      display: none;
  }
  :target ~ [data-open=true] {
      display: none;
  }
  :target ~ .cs-more-p,
  :target ~ [data-open=false] {
      display: block;
  }