CSS实现：如何在列边框之间放置时间内容？

当前设计效果 #

核心需求 #

我希望把时间显示在列标题的边框之间，静态实现这个效果是否可行？我有16列（实际为17列），要让时间从第一列的线条位置一直延伸到最后一列，预期效果如下：

预期效果 #

额外优化需求 #

另外，要是能让列边框向上延伸一点就更好了！

代码实现 #

<template>
    <div class="calendar">
        <!-- Header -->
      <div class="calendar__header">
            <div class="calendar__header--time">6:00</div>
            <div class="calendar__header--time">7:00</div>
            <div class="calendar__header--time">8:00</div>
            <div class="calendar__header--time">9:00</div>
            <div class="calendar__header--time">10:00</div>
            <div class="calendar__header--time">11:00</div>
            <div class="calendar__header--time">12:00</div>
            <div class="calendar__header--time">13:00</div>
            <div class="calendar__header--time">14:00</div>
            <div class="calendar__header--time">15:00</div>
            <div class="calendar__header--time">16:00</div>
            <div class="calendar__header--time">17:00</div>
            <div class="calendar__header--time">18:00</div>
            <div class="calendar__header--time">19:00</div>
            <div class="calendar__header--time">20:00</div>
            <div class="calendar__header--time">21:00</div>
            <div class="calendar__header--time">22:00</div>
        </div>
        <!-- Body -->
        <div class="calendar__body">
            <div class="calendar__row" v-for="(activity, index) in activities" :key="index">
                <div class="calendar__cell">{{ activity.name }}</div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
                <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            </div>
        </div>
        <!-- Footer -->
        <div class="calendar__footer">
            <div class="calendar__cell"><span class="calendar__cell--value">TOTAL</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
            <div class="calendar__cell"><span class="calendar__cell--value">Cool</span></div>
        </div>
    </div>
</template>
<style scoped lang="scss" src="./Calendar.scss"></style>
<script lang="ts" src="./Calendar.ts"></script>

内容的提问来源于stack exchange，提问作者user9132502