css - Zero-width space affecting styling -

just spent piss-me-off amount of time running down bug , hoping has answer what's causing can never deal again.

i'm writing raw css site i'm building , using psuedo-elements add upward , downward pointing chevrons top , bottom, respectively, of of pages.

#chevronup {   position: fixed;   left:50%;   top:5%;   text-align: center;   padding: 0px;   margin-bottom: 0px;   height: 8px;   width: 100px; } #chevrondown {   position: fixed;   left:50%;   bottom:5%;   text-align: center;   padding: 0px;   margin-bottom: 0px;   height: 8px;   width: 100px;   z-index:10; }  #chevronup:before {   content: '';   position: absolute;   top: 0;   left: 0;   height: 100%;   width: 51%;   background: #3c3f44;   -webkit-transform: skew(0deg, -35deg);   -moz-transform: skew(0deg, -35deg);   -ms-transform: skew(0deg, -35deg);   -o-transform: skew(0deg, -35deg);   transform: skew(0deg, -35deg); }  #chevrondown:before {   content: '';   position: absolute;   top: 0;   left: 0;   height: 100%;   width: 51%;   background: #3c3f44;   -webkit-transform: skew(0deg, 35deg);   -moz-transform: skew(0deg, 35deg);   -ms-transform: skew(0deg, 35deg);   -o-transform: skew(0deg, 35deg);   transform: skew(0deg, 35deg); }  #chevronup:after {   content: '';   position: absolute;   top: 0;   right: 0;   height: 100%;   width: 50%;   background: #3c3f44;   -webkit-transform: skew(0deg, 35deg);   -moz-transform: skew(0deg, 35deg);   -ms-transform: skew(0deg, 35deg);   -o-transform: skew(0deg, 35deg);   transform: skew(0deg, 35deg);   }​  #chevrondown:after {   content: '';   position: absolute;   top: 0;   right: 0;   height: 100%;   width: 50%;   background: #3c3f44;   -webkit-transform: skew(0deg, -35deg);   -moz-transform: skew(0deg, -35deg);   -ms-transform: skew(0deg, -35deg);   -o-transform: skew(0deg, -35deg);   transform: skew(0deg, -35deg); } 

i thought relatively simple, kept ending downward facing chevron missing right half, so:

http://jsfiddle.net/h3yqhhxc/1/

you can see on jsfiddle, there's pesky little zero-width space character hanging out after closing bracket on #chevronup:after selector (on #chevrondown:after closing bracket too).

turns out these things tough delete.

i'm using sublime text 2 , found script here on worked, have no desire have text editor running plugin after every keystroke.

so tried hacky behavior , ended this, works, i'm assuming, removing zero-width space affecting selector following it:

#chevronup:after {   content: '';   position: absolute;   top: 0;   right: 0;   height: 100%;   width: 50%;   background: #3c3f44;   -webkit-transform: skew(0deg, 35deg);   -moz-transform: skew(0deg, 35deg);   -ms-transform: skew(0deg, 35deg);   -o-transform: skew(0deg, 35deg);   transform: skew(0deg, 35deg);   }​{}   <------note brackets 

http://jsfiddle.net/yfm9c5fz/

but there's got better answer that? these zero-width spaces being added/how stop it?

here sublime text 3-specific plugin runs asynchronously, looking instances of zero-width spaces (unicode code point \u200b). every time current view modified, searches through character character looking zero-width space character. if finds one, adds location list , keeps looking until reaches end of file. then, if characters found, highlighted according invalid scope in theme. once highlighted, can selected , deleted. since runs asynchronously, shouldn't see performance drop while editing.

open new file in sublime, , set syntax python. paste following it:

import sublime_plugin  class showzerowidthspace(sublime_plugin.eventlistener):     def on_modified_async(self, view):         spaces = []         p = 0         while true:             s = view.find('\u200b', p + 1)             if not s:                 break             spaces.append(s)             p = s.a          if spaces:             view.add_regions("zero-width", spaces, "invalid")         else:             view.erase_regions("zero-width") 

save file in packages/user directory show_zero_width_space.py, , should start working immediately. can find packages directory selecting preferences -> browse packages... menu option.

---

once you've determined file contains u+200b characters, can rid of them using regex find , replace. select find -> replace..., , in "find what" field enter \x{200b}. leave "replace with" field blank, select .* regular expression button, wrap button, , highlight matches button:

hit replace all , you're set.