title: Hide or remove part of the content of an HTML element using CSS
body: <p><strong>The problem</strong></p>
  
  <p>I cannot alter the way in whcih the HTML below is output, but I do need to amend the way in which it is displayed.  I know I can achieve my desired results with <code>jQuery</code>, but I'd like to do it with pure <code>CSS</code> possible?</p>
  
  <p><strong>What exactly I need to do</strong></p>
  
  <p>I need to show the <code>input</code> from the HTML below, but the <code>label</code> itself is superfluous.  The tag can stay or go, I'm not bothered by that, but <code>Username</code> and <code>&lt;br&gt;</code> need to be gone.</p>
  
  <p>Obviousely I cannot use <code>label[for="user_login"]{ display: none; }</code>, as this will fail because it will hide everything within the selector.</p>
  
  <p><strong>The original HTML</strong></p>
  
  <pre><code>&lt;label for="user_login"&gt;
      Username
      &lt;br&gt;
      &lt;input id="user_login" class="input" type="text" size="20" value="" name="log"&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p><strong>The desired HTML</strong></p>
  
  <pre><code>&lt;label for="user_login"&gt;
      &lt;input id="user_login" class="input" type="text" size="20" value="" name="log"&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p><strong>jQuery approach</strong></p>
  
  <pre><code>$(document).ready(function(){
  
      var username_label = $('label[for="user_login"]'),
          username_input = username_label.find('input');
  
      username_label.html(username_input);
  
  });
  </code></pre>
  
  <p><strong>Why I don't want to use jQuery</strong></p>
  
  <p>The login for in question is displayed differently depending on screen size.  On smaller devices I requre the labels hidden (to save space), while on larger screens the label should still be visible.  Using the jQuery approach will remove the labels in both cases.</p>
  
  <p>While I know I can check the screen widht on load, and then use <code>resize</code> event (if necessary), should the screen size change (on a tablet, portrait to landscape for example) the labels could be removed and then not visible when they need to be.</p>
  
  <p><strong>Question</strong></p>
  
  <p>Can I achieve this result (or similar) with pure <code>CSS</code>?</p>