如何在content元素中创建链接

Question

我的任务是创造这个。

我可以使用伪元素内容创建box，font-awesome图标和非链接文本，但我无法创建Learn More链接（包含span类以包含＆gt;）。

如果我直接在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>

有没有人有解决方案可以帮助我完成这项工作？

由于

Answer 1

这是一个不同的结构＆amp; CSS，如果你最终走向那个方向。

.message {
  border: 2px solid #7b7b7b;
  border-radius: 2px;
  position: relative;
  width: 220px;
  font-size: 13px;
  font-family: Arial;
  background: #f7fcff;
  padding: 7px 8px 5px 42px;
}

.message>.message-icon {
  position: absolute;
  color: #7b7b7b;
  font-size: 26px;
  left: 10px;
}

p {
  color: #7b7b7b;
  margin: 0 0 3px 0;
}

a {
  color: #1464ae;
  font-size: 12px;
  text-decoration: none;
}

a .action-icon {
  margin-left: 3px;
  font-size: 10px;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="message">
  <span class="message-icon"><i class="fa fa-exclamation-circle"></i></span>
  <p>You are no longer on FPC, you will now be back to your regular contract.</p>
  <a href="">Learn More
    <span class="action-icon"><i class="fa fa-chevron-right"></i></span>
  </a>
</div>