Contextual Links with CSS Attribute Selectors + Font Awesome

This is a link. In fact, this is also a link. Here, have another one. What would happen if you were to click each of the above links? It can be hard to tell just by looking at them. With CSS, we can display icons inline with our links to provide a little more information: .context-link::before { font-family: Font Awesome\ 5 Free; margin: 0 0.2em; } /* PDF Files */ .context-link[href$='.pdf']::before { content: '\f15b'; } /* External Links */ .context-link[href*='://']:not([href*='nateweller.com']):before {…

Read This!