I know this is an old comment on an old article (Hey Lucia!!!) but it came up as the first result when I Googled a11y target=_blank so I wanted to drop a note on this for future readers - pseudo elements are not to be used for actual information, only decoration. So while I appreciate the cleverness of this solution, it is not a viable option for a11y support.
Thank you. May I suggest a version using pseudo selectors.
[target="_blank"] {
position: relative;
display: inline-block;
padding-right: 1rem;
}
[target="_blank"]:after {
content: "(opens in a new window)";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
[target="_blank"]:before {
content: " \2197";
position: absolute;
right: 0;
}
Please let me know what you think.
I know this is an old comment on an old article (Hey Lucia!!!) but it came up as the first result when I Googled
a11y target=_blankso I wanted to drop a note on this for future readers - pseudo elements are not to be used for actual information, only decoration. So while I appreciate the cleverness of this solution, it is not a viable option for a11y support.wow this is such a lovely example of CSS enhancing accessibility!