How to create link in content element

Question

I have been tasked with creating this.

I can create the box, font-awesome icon and the non-linking text using a pseudo element content, but I am unable to create the Learn More link (with a span class to include the >).

If I add text directly into the html, it will not fill the box (and spills out below it). I would also be forced to use inline styles to keep it top-aligned with the !.

We want to keep this in the CSS if at all possible. I realize that the real answer is that you can't do it, but I'm looking for a workaround to make it work.

This is the CSS I can use to place the non-linking message:

    &: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;
    }

And this is the line of HTML:

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

Does anyone have a solution to help me make this work?

Thanks

Answer 1

Here is a different structure & CSS if you end up going in that direction.

 .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>