コンテンツ要素にリンクを作成する方法

Question

私はこれを作成することが任されています。

>私は箱、フォント素晴らしいアイコンと擬似要素のコンテンツを使用して、非リンクテキストを作成することができますが、私は含まれるようにスパンクラスと詳細はこちらのリンクを（作成することができません）。

テキストを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

は異なる構造& 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>