How to Set a Pseudo-Element Content in Tailwind
In research-based websites, we often come across some redirection links or text associated with the elements. These links/text enhance the user understanding and improve the overall layout of the site upon being placed before or after the element as per the requirements.
This article covers the following content:
- What are Pseudo Elements?
- How to Set a Pseudo-Element Content in Tailwind?
- Setting a Pseudo-Element Content in Tailwind.
- Setting a Pseudo-Element Content Via Referencing an Attribute Value in Tailwind.
What are Pseudo Elements?
The pseudo-element corresponds to an element utilized to style particular parts of an element i.e., appending content before or after the elements, etc.
How to Set a Pseudo-Element Content in Tailwind?
The “content-{value}” utilities are used combined with the “before” and “after” modifiers to assign the content “before” and “after” the pseudo-elements followed by the square bracket notation(to specify the arbitrary content value).
Example 1: Setting a Pseudo-Element Content in Tailwind
This example sets a pseudo-element content followed by a value in the square brackets that displays after the target content referring to a redirected URL:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<p class = "text-2xl">This is <a class="text-blue-500 after:content-['_
'] ..." href="https://linuxhint.com/" target="_blank">Linuxhint</a> website. Tailwind CSS is a great feature that assists in appending the appealing features effectively on the site which improves the site traffic. Also, it is of great aid in enhancing the site's responsiveness.</p></body>
</html>
In this code, perform the below-given steps:
- First of all, specify the CDN path to make use of the Tailwind functionalities.
- After that, create a “<p>” element comprising the “text-2xl” class that indicates the font size.
- Within the “<a>” tag, specify the text color, and the combined “after” modifier followed by the specified link in the “href” attribute.
- This displays the square bracket value after the redirected message link i.e., “Linuxhint”.
Output
This output implies that a pseudo element’s content is set appropriately.
Example 2: Setting a Pseudo-Element Content Via Referencing an Attribute Value in Tailwind
The following code demonstration incorporates the CSS feature i.e., the “attr()” function refers to a value contained in an attribute:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div before="This is Linuxhint" class="before:content-[attr(before)] text-2xl">
This is Tailwind CSS
</div>
<div class="after:content-['This\_is\_Linuxhint'] text-2xl">
This is Tailwind CSS
</div>
</body></html>
According to these code lines:
- Repeat the procedure for including the CDN path and creating the “<div>” element.
- Also, include the “before” attribute containing the given message.
- Now, the “before” modifier includes the “attr()” function to display the message specified in the attribute i.e., “before” before the element’s content.
- Note: The placed underscore in the “content-{value}” utility is dealt as a blank space.
- The same functionality can also be achieved by specifying the target message after the element’s content via the “content-{value}” utility including the actual underscores.
- This resultantly displays the value after the element’s content.
Output
As visualized, both values along the element’s content are displayed appropriately.
Conclusion
The “content-{value}” utilities are used combined with the “before” and “after” modifiers to set the contents before and after the pseudo-elements. Moreover, the specified attribute values can also be referenced to display before or after the element’s text. This guide demonstrated how to set a pseudo-element content in Tailwind.
Source: linuxhint.com