CSS Pseudo Element

Pseudo Element

I came across the ::after element when constructing a responsive design.

I have tried to change the CSS file and the HTML template to see exactly what is happening here - in all cases (so far) all that I managed to do is to break the page.

The ::after pseudo class is used to add some (cosmetic) content after the content. In my case I am assuming that I am clearing and floating any content after the div class="row".

In some respects I should not use something that I don't understand or worse can't explain. However, it has been working for me for a while. The link to css-tricks.com gives some sort of insight into this. The comment:

You want the generated content to come before the element content, positionally.

Seems to be what is happening and the values for content: ""; (the code in the clearfix)

There is also reference to clearfix which I was experimenting with floating images.

Update: I now understand this technique. See my page on what happens when you don't use a clearfix

first-letter example selector.class::first-letter - from the W3C website

This is an introduction.

This is a paragraph with some text, the first letter of which is coloured and a different font size. The second line in a paragraph should not be coloured and be the same font

A paragraph only has one first letter. As such you can add the colour and text as in this example you can change the first line using ::first-line. This is the second sentence. This is an exampe of multiple classes.

The ::after example - from my rwd.css file

I am still not sure what is going on here.

The CSS is:

.row::after {
content: "";
clear: both;
display: block;
}

and HTML is: <div class="row">

The container <div class="row"> is placed around two other <div> classes:
<div class="rcontent-menu menu"> and
<div class="rcontent-main">

The class "row" is a pseudo-class and an example of clearfix. Without this the footer and trepeat containers don't position below the main container.

Links

External Sources

css Pseudo Element - November 2019