Last Updated: 

Adding HTML Links in CSS `::after` Content

CSS provides a powerful set of pseudo-elements that allow us to insert content before or after an element. One use case is to add text content that resembles a link within the ::after pseudo-element. This can be useful for adding additional information or call - to - action text near an existing element on a web page. In this blog post, we'll explore the fundamental concepts, usage methods, common practices, and best practices for adding text content in CSS ::after pseudo-elements.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts#

Pseudo - elements#

Pseudo - elements in CSS are used to style specific parts of an element. The ::after pseudo - element creates a virtual element that is the last child of the selected element. It is often used to add decorative or supplementary content to an element without modifying the HTML structure.

Content Property#

The content property in CSS is used to insert generated content into an element. It can take different types of values such as text, images, or counters. When adding a link, we can use the attr() function to reference an HTML attribute and display its value as content.

When adding a link in the ::after content, we need to style it properly. Links have different states such as :link, :visited, :hover, and :active. We can use CSS to style these states and make the link visually appealing.

Usage Methods#

Basic Example#

Let's start with a basic example of adding text that resembles a link in the ::after content.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale=1.0">
    <style>
        p.link - after::after {
            content: " [Read more](https://example.com)";
        }
    </style>
</head>
 
<body>
    <p class="link - after">This is some initial text.</p>
</body>
 
</html>

In this example, we have a p element with the class link - after. The ::after pseudo - element adds text to the end of the p element. Note that this is just plain text and not a clickable link—CSS-generated content cannot create actual interactive <a> elements.

Using attr() Function#

We can use the attr() function to reference an HTML attribute and display its value as text content.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale=1.0">
    <style>
        p.link - after::after {
            content: " [Read more](" attr(data - link) ")";
            color: blue;
            text - decoration: underline;
        }
 
        p.link - after::after:hover {
            color: red;
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <p class="link - after" data - link="https://example.com">This is some initial text.</p>
</body>
 
</html>

In this example, we use the data - link attribute in the HTML to store the link URL. The ::after pseudo - element uses the attr() function to display the link URL as text. However, this text is not a clickable link—it is merely displayed text. CSS-generated content cannot create actual interactive <a> elements. For a truly clickable link, you would need to add an <a> element directly in the HTML or use JavaScript to insert it dynamically.

Common Practices#

Adding Icons with Text#

We can combine icons with text in the ::after content. For example, we can use Font Awesome icons.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font - awesome/5.15.3/css/all.min.css">
    <style>
        p.icon - link::after {
            content: " <i class='fas fa - external - link - alt'></i> [Visit](" attr(data - link) ")";
            color: blue;
            text - decoration: underline;
        }
    </style>
</head>
 
<body>
    <p class="icon - link" data - link="https://example.com">Check this out.</p>
</body>
 
</html>

In this example, we use a Font Awesome icon (fa - external - link - alt) along with text in the ::after content. The text is purely decorative and not an actual hyperlink.

Adding Multiple Text Items#

We can also add multiple text items in the ::after content.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF - 8">
    <meta name="viewport" content="width=device - width, initial - scale=1.0">
    <style>
        p.multiple - links::after {
            content: " [Link 1](" attr(data - link1) ") | [Link 2](" attr(data - link2) ")";
            color: blue;
            text - decoration: underline;
        }
    </style>
</head>
 
<body>
    <p class="multiple - links" data - link1="https://example1.com" data - link2="https://example2.com">Some text here.</p>
</body>
 
</html>

Best Practices#

Accessibility#

  • Screen Readers: Ensure screen readers can properly convey the generated content. Use clear and descriptive text in the content property so that users understand the meaning of the content even though it is not an actual link.

Compatibility#

  • Browser Support: Check the browser support for the CSS features you are using. Although most modern browsers support ::after and attr() functions, it's always a good idea to test in different browsers.

Performance#

  • Avoid Over - Complexity: Keep the ::after content simple. Over - complex content can slow down the rendering of the page.

Conclusion#

Adding text content in CSS ::after pseudo-elements can be a useful technique to enhance the user experience on a web page. By understanding the fundamental concepts, usage methods, common practices, and best practices, you can effectively use this feature to add supplementary information and call - to - actions near existing elements. Keep in mind that CSS-generated ::after content cannot create actual interactive links—for clickable links, you must use HTML <a> elements or JavaScript. Remember to keep accessibility, compatibility, and performance in mind when implementing this feature.

References#

2025-10