Как проверить наличие элементов HTML и добавить к ним текст, используя только CSS или Sass?

Question

У меня есть два элемента: author и citiion внутри div, как показано ниже:

<div>
   <h1>author</h1>
   <h1>citation</h1>
</div>

Если существует и автор, и цитата, я ставлю запятую между автором и цитатой. Если существует только один из них или ни один из них не существует, я ничего не делаю.

Есть ли способ сделать это в CSS или Sass только без JavaScript?

Answer 1

В CSS вы не можете манипулировать более ранним братом, проверяя следующего. Единственный способ проверить, есть ли второй элемент и что-то с ним сделать, - это выбрать его.

Вы можете решить это, используя псевдоэлемент :before. Тем не менее, это может быть не так, как вы хотите, потому что два элемента находятся на разных линиях (оба <h1>).

Итак, если вы хотите сделать это без JavaScript, я бы рекомендовал рассмотреть возможность размещения обоих элементов в одной строке.

h1 span:nth-of-type(2):before {
  content: ', ';
}

<h1>
  <span>author</span><span>citation</span>
</h1>