RSS Icon via CSS

CSS3 allows us to draw very beautiful objects, and in some cases to dispense with the use of the usual graphics.
Let’s try to make the icon for RSS without the use of graphics. Our tool will CSS, as well as pseudo-classes :before and :after.

HTML-code consists of a single line:

<a href="your_site.com/your_feed/" class="rss-icon">RSS</a>

Result:RSS
Now it does not look like the icon RSS, right? But we have not used CSS… Ready? Then let’s go 🙂
We make the block icons for the CSS. Since the icon is likely to be a link (inline-element), we have to make it block. Also we have to make positioning. In addition, move the text beyond the borders of sight.

Width, height, margins, colors and background can specify your own. In the example I will use 160×160 pixels, you can specify your own value. For example on my blog icon changes depending on the screen size.

And finally pseudo-class :after. Pay attention to the property “border-style: double” – exactly it will allow us to show the two bands on the icon.
The size and the padding can specify their (remember, example for block 160×160 pixels).