We’ve all been there. We’re on a blog, trying to read an article or make a recipe and we’re bombarded with Google Ads that are hardly separated from the content. Yikes!
What can a website owner do?
Well, if your website serves Google Auto-Placed Ads, you should consider adding custom CSS to help tame the look and feel of the advertisements displayed on your site.
CSS for Google Ads (Google AdSense)
When Google auto-places an advertisement on your web property, the ad is served inside a <div> container with the class google-auto-placed. This means you can use CSS on the content that Google places automatically on your website.
So, what CSS do I want to add to my Google AdSense advertisements?
Add a CSS “Advertisement” Label to Google Ads
A common desire is place the word ADVERTISEMENT either above or below the served advertisement. To do so, you’ll add a font size, font family and font style to the main class and then use either ::before or ::after to place that text above or below your advertisement.
/*Places the word ADVERTISEMENT ABOVE served ads and styles text*/
.google-auto-placed::before {
content: 'Advertisement';
position: relative;
text-transform: uppercase;
color: #bbb;
font-size: .85rem;
}or
/*Places the word ADVERTISEMENT BELOW served ads*/
.google-auto-placed::after {
content: "Advertisement";
}and
Add a CSS Border Around your Auto-Placed Google Ads
/*Forces a thin border */
.google-auto-placed iframe {
border: 1px solid #efefef !important;
}Watch a Video about How to Add the word “Advertisement” Before or After Your Google Ads
Before and After
This CSS adds a subtle 1px border around the iframe of Auto Served Google Ads and the word, “Advertisement” above the box. This helps to create a visual separation of your website content from auto-served advertisements.
