Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css rotate a pseudo :after or :before content:""

People also ask

When would you use the :: before or :: after pseudo-element in your CSS?

Special welcome offer: get $100 of free credit. CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.

What is before and after pseudo selectors in CSS?

Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.

How do you make a pseudo-element responsive?

In your specific case, a simple solution is to change the blockquote::after selector to blockquote p::after , and remove the top:45% and right:34% properties. The ::after element is then inserted at the end of the text, which means its position changes as the text reflows.


Inline elements can't be transformed, and pseudo elements are inline by default, so you must apply display: block or display: inline-block to transform them:

#whatever:after {
  content: "\24B6";
  display: inline-block;
  transform: rotate(30deg);
}
<div id="whatever">Some text </div>