::after Back

• ::after is a generated content element that represents a styleable abstract last child of the respective element.
• The content inserted using ::after is inserted after other content inside the element and is displayed inline by default. The value of the content is specified using the content property.

Case 1: add a small icon to all links

Let's <a href="#" class="external">Move The Web Forward</a> together!

.external::after {
    content: url(external-link.png);
    padding-left: 5px;  /** create some space between the icon and the link */
}

See the Pen ZQXbQo by aleen42 (@aleen42) on CodePen.

Case 2: using attribute selector

a[href]::after {
    color: grey;
    content: " (" attr(href) "(";   /** use attr() to get the attribute */
}

See the Pen WrZvVR by aleen42 (@aleen42) on CodePen.