How to rotate a pseudo- element 's content value

In CSS, you can use pseudo-elements (e.g., ::before or ::after) to add content and apply the transform property to rotate it. Here is a step-by-step guide with examples showing how to rotate the content of a pseudo-element:

Step 1: Define the HTML structure

First, we need an HTML element to serve as the mount point for our pseudo-elements:

html
<div class="rotate-example">This is an example text.</div>

Step 2: Add and rotate pseudo-elements

Next, in CSS, we use pseudo-elements to add content and apply the transform property for rotation.

css
.rotate-example::after {
    content: 'Rotated text';
    display: block;
    transform: rotate(90deg);
    transform-origin: center;
    margin-left: 20px;
}

In the above CSS styles:

• The content property sets the content of the pseudo-element.
• Setting display: block; treats the pseudo-element as a block-level element, making it easier to apply transformations.
• The transform: rotate(90deg); property instructs the browser to rotate the pseudo-element content by 90 degrees.
• The transform-origin: center; property sets the rotation origin, which defaults to the center of the element.
• The margin-left: 20px; adds some left margin for visual effect, distinguishing the original text from the rotated pseudo-element content.

Example Output

After this setup, the element on your HTML page will display the main text, with the added rotated text shown vertically afterward. This approach is ideal for adding labels, annotations, or special icons, enhancing the visual appeal and information expression of web pages.

The rotation of pseudo-element content can be adjusted according to needs, which is very useful for creating dynamic interactive interfaces, such as tooltips or dynamic button effects.