Html 如何在内容元素中创建链接

我的任务是创建这个

我可以使用伪元素内容创建框、字体图标和非链接文本，但无法创建“了解更多”链接（使用span类包含>）

如果我将文本直接添加到html中，它将不会填充该框（并在其下方溢出）。我还将被迫使用内联样式，以使其顶部与！对齐

如果可能的话，我们希望将其保留在CSS中。我意识到，真正的答案是你不能这样做，但我正在寻找一个解决办法，使它的工作

这是我可以用来放置非链接消息的CSS：

    &:after {
        color: #7b7b7b;
        margin-top: -43px;
        padding-left: 19%;
        line-height: 18px;
        display: flex;
        font-weight: normal;
        content: "You are no longer on FPC, you will now be back to your regular contract.";

        @media #{$small} {
            padding-left: 15%;
            margin-top:-37px;
        }
    }

    &:before {
        color: #7b7b7b;
        margin-left: 10px;
    }

这是HTML的一行：

<i class="fa fa-exclamation-circle"></i>;&nbsp;&nbsp;<a href="#">Learn more <span class="arrow-right"></span></a>

；

有没有人能帮我解决这个问题

---

谢谢

如果你最终朝着这个方向走，这里有一个不同的结构&CSS

。消息{
边框：2px实心#7b；
边界半径：2px；
位置：相对位置；
宽度：220px；
字体大小：13px；
字体系列：Arial；
背景：#f7fcff；
填充：7px 8px 5px 42px；
}
.message>.message图标{
位置：绝对位置；
颜色：#7b；
字号：26px；
左：10px；
}
p{
颜色：#7b；
利润率：0.3px 0；
}
a{
颜色：1464ae；
字体大小：12px；
文字装饰：无；
}
a.动作图标{
左边距：3倍；
字体大小：10px；
}

你不再参加FPC，你现在将回到你的常规合同

您可以发布生成的CSS而不是SCS吗？在这种情况下，

&

指的是什么还不清楚。部分问题在于，您的开始span标记需要如下所示：

@AlexW右箭头是以前设置的变量，因为它在许多地方都使用过，并且工作正常。引导代码中还建立了&:after来表示伪元素（我们的一个主要开发人员以几种方式对其进行了攻击，例如，媒体#{$small}实际上是指桌面版本）…使用您的代码片段，似乎可以工作。我明天早上去试试，然后回来汇报。