CODEWITHSUNDEEP
css
Houston Brown
Houston Brown

Reputation: 71

Can not get CONTENT property to work

I am trying to create a pre-styled button using a div with a class of .red-button. Some buttons need to have a littel magnifying glass on them so I am thinking I can use the CONTENT property to display this on those buttons that need it by simply adding "features" to the class. 

<div class="red-button features">Find a Home</div>

CSS looks like this:

.red-button {
    background: none repeat scroll 0 0 #A20335;
    color: #FFFFFF;
    font-size: 70%;
    font-weight: normal;
    padding-left: 10px;
    text-transform: uppercase;
    width: 193px;   
}
.red-button.features, .red-button.floor-plans  {
    margin-right:20px;
    content:url("http://www.abc.com/popeye/wp-content/uploads/construct/icon-magnifier.png");
}

So why is my magnifying glass not showing up?

I know the link is right because when I add ":before" to the css it shows up. 

.red-button.features:before

Here is the page I am working on: http://splitlightdesigns.com/megatel/?page_id=379

Many thanks, Houston

Upvotes: 1

Views: 41

Answers (1)

Palpatim
Palpatim

Reputation: 9262

content can only be used with the ::before and ::after pseudo-elements. https://developer.mozilla.org/en-US/docs/Web/CSS/content

Upvotes: 1

Related Questions