html - 使用 css 和 html 将单词放在另一个下面的最佳解决方案是什么？

Question

用 html 和 css 编写这个的最佳方法是什么？我尝试对每个使用 div，但我认为这不是最好的解决方案，如果有人有其他更好的解决方案的话

Answer 1

我会使用行内元素(如 span)将文本保持在同一行，并且 pseudo-elements在下方放置装饰性内容。

.team {
  position: relative;
}
.team::after {
  content: attr(title);
  position: absolute;
  top: 2em;
  left: 0;
  font-size: 0.5em;
  text-transform: uppercase;
}

<div class="match">
  <span class="team" title="Home">AC Milan</span>
  VS
  <span class="team" title="Away">Real Madrid</span>
</div>