CSS Add Content Between Links

Table of Contents

• Introduction
• Adding Content Separator Between Links
• Result
• Conclusion

Introduction

This post provides sample code for applying styles only for tablet and mobile devices, and inserting content between links using CSS.

Adding Content Separator Between Links

The following is an example of adding a content separator | between links and using a media query to apply styles for widths less than 1024px:

@media (max-width: 1024px){
    .my-footer ul li{
        display:inline;
    }

    .my-footer ul li a{
        margin-right:1px;
    }

    .my-footer ul > li > a::after{
        content: " | ";
    }

    .my-footer ul > li:last-child a::after{
        content: "";
    }
}

Result

Here is how it looks:

Conclusion

Using CSS ::after pseudo-elements with media queries is a clean way to add visual separators between links without modifying the HTML. The :last-child selector ensures the separator is not added after the final link.