CSS target selector

Question

Is there a way to display p tag "This is my answer" when you click on anchor tag "Click me" with just CSS? I know I can put p tag after anchor tag and make it work but I was wondering if there is a way to make it work with the code below?

  <ul>
     <li>
        <div>
           <a href="one" id="one"> Click me </a>
        </div>
     </li>
        <div class="info">
           <p> This is my answer </p>
        </div>
   </ul>


li {
    list-style: none;
}

.info {
    display:none;
  }

.info:target {
    display:block;
}

https://jsfiddle.net/vwep64bd/2/

Answer 1

Here's a CSS-only documented hack to control elements with a hidden checkbox. This definitely seems to cross the boundaries of "should", but sure, it's possible.

For more reading: https://css-tricks.com/the-checkbox-hack/

	li {
		list-style: none;
	}

	label.link {
		color: blue;
		text-decoration: underline;
		cursor: pointer;
	}

	div.info {
		display: none;
	}

	#toggle-1 {
		display: none;
	}

	#toggle-1:checked ~ div {
		display: block;
	}

<ul>
    <li>
        <div>
            <label class="link" for="toggle-1">Click Me</label>
        </div>
    </li>
    <input type="checkbox" id="toggle-1">
    <div class="info">
        <p>
            This is my answer
        </p>
    </div>
</ul>