Wie verstecke ich Text, der sich nicht im HTML-Tag befindet?

Question 1

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

Im obigen Code möchte ich das Wort “US” ausblenden. Ich verstecke dieses Bild nach US, kann aber keinen Weg finden, dieses “US” -Wort zu verstecken. Was könnte der Code sein, um es zu verbergen?

Question 2

Etwas wie das?

.padd10_m {
  font-size: 0px;
}
.padd10_m > * {
  font-size: 14px;
  /* Apply normal font again */
}

<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

Arbeitsgeige

Oder

Wenn Sie mit JavaScript (Ich sehe aber nicht warum), hier ist die Lösung:

var pad = document.querySelector('.padd10_m');
Array.prototype.forEach.call(pad.childNodes, function(el) {
  if (el.nodeType === 3) {   // check if it is text node
    pad.removeChild(el);     // remove the text node
  }
});

<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

Question 3

Verwenden Sie CSS:

.padd10_m { font-size: 0; }
.padd10_m * { font-size: 1rem;}

Question 4

Versuche dich mit zu verstecken font-size

.padd10_m{font-size:0;}
.padd10_m > a{font-size:16px;}

<div class="padd10_m">
  <a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> US
  <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">
</div>

Question 5

CSS

   .padd10_m {
    font-size:0px;
    }

    .padd10_m a{
    font-size:14px;
    }

HTML

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

Question 6

Wenn Sie :after hinzufügen, können Sie ein Leerzeichen zwischen admin und dem Flag einfügen.

.padd10_m{
  font-size: 0px;
}

.padd10_m a{
  font-size: 16px;
}

.padd10_m a:after{
  content: ' ';
}

Question 7

<script type="text/javascript">
    document.body.innerHTML = document.body.innerHTML.replace(/US <img/g, '<img');
</script>

Boom

Question 8

Sie können das Bild (US-Flagge) über den Text bewegen:

.padd10_m img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
}

Zusätzlich können Sie die Schriftfarbe gleich der Hintergrundfarbe einstellen.

img {
    margin: 0 0 -7px -25px;
    border: 5px solid #fff;
  }

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>

Aktualisieren: Mir war nicht klar, dass das Bild auch ausgeblendet werden sollte. Hier noch eine Lösung:

.padd10_m {
  width: 40px;
  overflow: hidden;
  white-space: nowrap;
}

<div class="padd10_m">
<a href="http://www.caviarandfriends.com/job_board/user-profile/admin/" class="grid_view_url_thing1">admin</a> 
US <img src="http://www.caviarandfriends.com/job_board/wp-content/themes/PricerrTheme/images/flags/us.png">                
</div>