Html 红色背景的跨度不可见？

我有一个元素列表，我正在尝试显示它们，如果单击其中一个元素，字体权重将更改为粗体，并添加装饰下划线，uderline厚度为3px，因此我在link元素中添加了一个span，我将链接设置为相对，span设置为绝对，并添加了其他样式，这样：请转到标题选项

<div class="header__top-bar">
            <div class="header__logo-icons">
                <img class="header__logo" src="assets/images/cdiscountvoyage-trimmy.png" alt="logo">
                <div class="header__icons-container">
                    <a href="#">
                        <img src="assets/images/facebook.png" alt="facebook">
                    </a>
                    <a href="#">
                        <img src="assets/images/instagram.png" alt="facebook">
                    </a>
                    <a href="#">
                        <img src="assets/images/pinterest.png" alt="facebook">
                    </a>
                </div>
            </div>
            <div class="header__options">
                <a href="#">
                    <span style="display: inline-block;">Séjour</span>
                    <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
                </a>
                <a href="#">
                        <span style="display: inline-block;">Séjour</span>
                        <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
                </a>

                <a href="#">
                        <span style="display: inline-block;">Séjour</span>
                        <span style=" position: absolute; top: 20px; left: 0px; height: 3px; width: 100%; background-color: red; display: inline-block;"></span>
                </a>
            </div>
        </div>

现在，我不是在暗示js代码来查看click事件，我不仅仅是在看到我添加的下划线效果，所以我有：

但是当我检查我的元素时，我看到它在那里，但不可见，就像它有一个负的z-索引或其他什么，标题背景隐藏了它，但我不确定

这就是我想要的模型：

---

任何帮助都将不胜感激。

当我运行此代码时，删除了x-overflow:scroll；似乎起作用了，我能看到下划线

也可以考虑使用伪元素：：后，：：以前的这些事情。它们将使您的生活更轻松，代码更干净

此外，如果不确定为什么看不到元素，请尝试将其四处移动。更改z索引。更改其位置和显示属性。这些只是调试此类错误的简单方法。

将填充底部添加到.header\uu选项类。在这之后，我想你可以看到下面的线条

.header\u选项{ 显示器：flex； 宽度：100%； 溢出-x：滚动； 边缘底部：5px； 背景：深蓝色； 填充底部：10px；/*添加了填充底部以在底部获得空间*/ } .标题\选项a{ 右边距：20px； 位置：相对位置； 字体大小：14px； 文字装饰：无； 颜色：ffffff； 字体系列：Arial，无衬线； 字体大小：粗体； } .header\u选项a：最后一个子项{ 右边距：0； } 文件

---

Span标记是一个内联元素。您无法为此设置高度和宽度。它总是用内容的高度和宽度来包装内容。 所以，您可以在这里做的是，将边框底部样式添加到a标记中。并删除你的空白跨度。 底部边框：3倍纯红

---

希望这会对您有所帮助。

是的，这是正常的，但我必须添加滚动？？我在我的代码中添加了after和before元素，但没有起作用，它们甚至没有出现，所以我选择了这个解决方案。你的答案看起来像是一个注释，更像是一个答案，但无论如何，谢谢。是的，这是一个解决方案，但它会增加我元素的高度。你看，如果我这样做，我不会尊重我在实体模型中的一些东西。。

.header__options {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    margin-bottom: 5px;
}

.header__options a {

    margin-right: 20px;
    position: relative;

    font-size: 14px;

    text-decoration: none;

    color: #ffffff;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

.header__options a:last-child {
    margin-right: 0;
}