Question

I have the following HTML:

<span class="parent">
    Hello world
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</span>

Rules of the game:

• I want to remove the “Hello world” string using CSS
• The <a> tags should still be visible
• I cannot touch the HTML code
• No javascript

So the solution would be like setting display:none on a <span> element surrounding the “Hello world” string only. The problem is that there is no such <span> and I cannot create one.

Answer 1

display:none; always hides children and overrides their display properties.

You can try using visibility instead:

.parent { visibility: hidden;}
.parent a { visibility: visible;}