pseudo-element

This question already has an answer here: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery 21 answers For context, this is a followup to an earlier question . Rather than digging through cssRules , I'd like to base the logic on jQuery selectors that search for the effects of those rules. Given default properties of .commentarea .author:before { background-image: url(http://...); background-position: -9999px -9999px; /* ... */ } that are selectively modified as in .author[href$="gbacon"]:before /* ... */ { content: ""; background-position: 0 -140px } how

I would like to make a button like these one just with CSS without using another element. Button Image Since the button has a border attached, I think I normally need both, the :before and :after elements to create just one arrow at one side. So to make one arrow at each side I would need another span element inside the link. The second method I tried is the one you see below. But with this solution they are not properly centered and each side of the arrow is different in length. Has someone a solution? /* General Button Style */ .button { display: block; position: relative; background: #fff;

I'm currently confused in using the icon in CSS pseudo-elements. There are 4 kind of font-family for fontawesome : Font Awesome 5 Free , Font Awesome 5 Solid , Font Awesome 5 Brands , Font Awesome 5 Regular Here is the HTML : <h1>Hello</h1> Case 1 I use this icon : https://fontawesome.com/icons/twitter?style=brands As you can see, its a brands icon, so font-family : Font Awesome 5 Brands h1:before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f099"; /* TWITTER ICON */ font-family: "Font Awesome 5 Brands"

I am trying to create a triangle shape with the pseudo elements. like the one in the image below. But this is what i get. Here is what i have tried this far. .container .form--container:before { content: ""; position: absolute; top: 0px; left: 130px; width: 28px; height: 28px; transform: translate(-1rem, -100%); border-left: 1.5rem solid #979797; border-right: 1.5rem solid #979797; border-bottom: 1.5rem solid white; } The issue is with the use of border. you can check this link How do CSS triangles work? and you will understand how border works and why you get this output. An alternative