'hide span when data is blank using inline css

my name: [$name]

How to make the “my name:” not visible if the "[$name]" is blank? I’m using inline css because this form will be sent to HTML email.

cssinlineinline-styles


Solution 1:[1]

As mentioned in the comments, if you want to use CSS only, it depends on the HTML structure. It is possible though.

.nameContainer {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.name {
  margin-left: 0.5em
}

.name:empty + span {
  display: none;
}
<div class="nameContainer">
  <span class="name"></span><span>My name:</span>
</div>

<div class="nameContainer">
  <span class="name">John Doe</span><span>My name:</span>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gerard

Related Questions