CODEWITHSUNDEEP
htmlcss
Nick Bewley
Nick Bewley

Reputation: 9289

showing <div> inside :before element

Using :before to add an icon font to a div for a css3 hover state. I want to include a div inside the <a> tag to allow both to serve as a link:

<a href="#set-4" class="column product hi-icon product-icon"><div>Product</div></a>

css:

.product-icon:before {
    content: "\e601";
    margin-top: "-4px";
}

However, I cannot figure out how to get the title div to display.

I have constructed a codepen here to display the problem. Can anyone point me towards the solution? Thanks very much!

Upvotes: 0

Views: 349

Answers (2)

ankhzet
ankhzet

Reputation: 2568

First: you can't add html via :before and :after pseudoclasses.

Second: both :before and :after adds it's contents outside of referenced element, not inside. So, even if you'd might use :before/:after for html insertion, you'd ended with <div><a ...>Product</a></div>, not <a ...><div>Product</div></a>.

If you really need auto-wrap contents of a with div, just use jQuery for that:

$('.product-icon').each(function() {
    $(this).html('<div>' + $(this).html() + '</div>');
});

Upvotes: 0

Brandon Gano
Brandon Gano

Reputation: 6710

Your <div> is inheriting a font-size of 0 from .hi-icon. Remove that, and it shows below the circle.

Upvotes: 1

Related Questions