diff --git a/client/src/pages/guide/english/css/selectors/pseudo/after/index.md b/client/src/pages/guide/english/css/selectors/pseudo/after/index.md new file mode 100644 index 0000000000..10c48c293c --- /dev/null +++ b/client/src/pages/guide/english/css/selectors/pseudo/after/index.md @@ -0,0 +1,42 @@ +--- +title: After +--- +## After + +The ```::after``` CSS pseudo-element inserts a custom HTML element after the content of the selected HTML element. This selector is most commonly used to add visual content using the CSS ```content``` property. + +General Syntax: + +```css +::after +``` + +## Example + +```css +/* "Text to insert" is placed after the content of each
element */ +div::after { + content: "Text to insert"; +} +``` + +## More Examples + +A great example of a practical use case is if you wanted to display the ```href``` attribute value for all links on your page. + +```html +Learn to code +``` + +```css +a::after { + content: " " attr(href); +} +``` + +The ```::after``` CSS pseudo-element can be used in many creative ways, especially when combined with it's sibling ```::before```. + +#### More Information: +* [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::after) +* [W3 Schools](https://www.w3schools.com/cssref/sel_after.asp) +* [CSS Tricks - A Whole Bunch of Amazing Stuff Pseudo Elements Can Do](https://css-tricks.com/pseudo-element-roundup/)