html - 使用 tabindex 隐藏跨度

Question

我正在尝试仅使用 css 编写“HIDE”-“SHoW”内容。但是当我打开下面的段落时，我需要隐藏 + (class="span2") 。我该怎么做？

p {
  display: block;
}
.question {
  position: relative;
  width: 70%;
  display: block;
  background-color: yellow;
  padding-left: 1%;
  padding-right: 1%;
}
.alert {
  display: none;
}
h1 {
  display: block;
  font-size: 2em;
  position: relative;
}
.span2,
.span3 {
  position: absolute;
  bottom: 0;
  right: 1em;
  font-size: 2em;
  vertical-align: bottom;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}

<div class="question">
  <h1 align="left">More about/ Question</h1>
  <span class="span2" align="right" tabindex="0">+</span>


  <p class="alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel sagittis metus, non commodo tortor. Donec vitae rutrum metus, a dictum nunc. Curabitur metus turpis, mattis sed libero vel, lacinia blandit nisl. Curabitur at accumsan ipsum, vitae
    vestibulum orci. Morbi accumsan dui odio, id varius mauris fermentum a. <span class="span3" align="right" tabindex="-1">-</span>
  </p>

</div>

所以，我不想使用 JAVA。可能我应该使用事件...或链接跨度到 h1 内容并在写入后(显示:无)...但我不知道:/

Answer 1

还有很多其他解决方案，但您可以在 CSS 中使用伪元素 :before 或 :after 来解决这个问题:see this fiddle

.span2:before { content: "+"; }
.span2:focus:before { content: "";}