hide span when data is blank using inline css

Question

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.

I don't think you can do it using CSS only, as it's a DOM Manipulation task. — Praveen Kumar Purushothaman, May 01 '22 at 08:28
What exactly is your HTML structure? You mention a span but do not show the code. — A Haworth, May 01 '22 at 08:37
Welcome to SO! Please consider reading [ask] and posting a [mre] of your code so we can give you some advice on how to proceed :) — AStombaugh, May 01 '22 at 08:46
Please provide enough code so others can better understand or reproduce the problem. — Community, May 01 '22 at 14:09

score 0 · Answer 1 · answered May 01 '22 at 15:02

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>

hide span when data is blank using inline css

1 Answers1