如何在HTML中显示与引导或不引导在字符":“前后对齐的单词？

<style>
  .aligned-word {
    display: inline-block;
    position: relative;
  }
  .aligned-word::before,
  .aligned-word::after {
    content: ":";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .aligned-word::before {
    right: 100%;
    margin-right: 5px;
  }
  .aligned-word::after {
    left: 100%;
    margin-left: 5px;
  }
</style>

<span class="aligned-word">word</span>