HTML and CSS Reference
In-Depth Information
.tweet {
padding-left: 55px;
padding-right: 20px;
position: relative;
.tweet:before {
content: url(../images/twitter-icon.png);
display: block;
position: absolute;
left: 15px;
top: 4px;
A pseudo-element uses the single-colon or double-colon syntax ( we're using single-colon
for better browser support ) in combination with another CSS selector, to add a phony (i.e.
“pseudo”) element inside the targeted element (the .tweet element). In this example, we're
using a before pseudo-element, so the inserted element will appear before the .tweet
element's content.
Notice that the .tweet element is positioned relatively. Also notice that there are 55 pixels
of padding set on the left side of the .tweet element. Next, in the pseudo-element selector,
we're using the content property to define what exactly we want to insert (in this case it's
a transparent PNG Twitter icon,) and then we're positioning the pseudo-element absolutely,
4px from the top and 40px from the left.
If we wanted, we could have inserted the Twitter icon inside our HTML using an <img> tag.
But in this case, since the icons are just decoration, we have the option to use a pseudo-ele-
ment or background image. By contrast, the images that appear in the “Latest Recipes” sec-
tion are not just decoration but are part of the main content; so those shouldn't be inserted as
background images or pseudo-elements via CSS, but should be placed into the HTML using
<img> tags. We'll talk more about backgrounds in the next chapter.
Since our pseudo-element is placed on the page using a class selector of .tweet , the
pseudo-element willappearoneveryelementonthepagethathasaclassof tweet .Afterwe
add these styles and refresh the page, our Yummy Tweets section will look like Figure 2.7 .
Search WWH ::

Custom Search