Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Reagan Knopp
Reagan Knopp
2,917 Points

Exempting Specific Characters in CSS

On my website I'd like to style all links that are H1's with 

text-decoraiton: underline;

but I don't want this to apply to the very last character in headline links (It's a right facing Unicode arrow. U+2192 I think). Is there a way to exempt this character from in my CSS?

2 Answers

John W
John W
21,558 Points
John W
John W
21,558 Points

Not sure if it is possible, but it doesn't sound like a good design pattern to follow. Consider the scenario that in the future you decide to remove that arrow character or move it elsewhere such as the front, then you'll also have to modify the CSS when you change the content as well. This approach ties style to content, thus it is not recommended.

Alternatively, you can wrap that character with <span> tags, and separately unset text-decoration by selecting "h1 span" instead. Even better, you can add that character using the :after pseudo element with the content property, thus completely removing it from the semantics.

James Barnett
James Barnett
39,199 Points

+1 for the suggestion of using :after, icon fonts FTW :smile:

Maya Han
Maya Han
6,069 Points
Maya Han
Maya Han
6,069 Points

I agree with John W. You can find out more about 'pseudo elements' here. link redacted

James Barnett
James Barnett
39,199 Points

As w3schools has some issues with credibility we try to never link newbies to them here on the forum. Instead link to html dog or Shaw Howe's Beginner's Guide to HTML & CSS

Maya Han
Maya Han
6,069 Points

Nice to know. W3Schools was often recommended by many resources as well as my school teachers back when I was in school.

James Barnett
James Barnett
39,199 Points

Lots of people make that mistake, that's why the web design community made the w3fools site. w3schools has been around for forever so its SEO is a lot higher than HTML Dog, Sitepoint Reference or MDN. Also Shaw Howe's site probably didn't exist at the time.