On hover change base element using css?

[him121213]

\[code\]<div class="hdr-me">Me <span class="mearrow"></span></div>\[/code\]css\[code\].hdr-me { width: 33px;height: 28px;float: left; -webkit-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); -moz-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); -o-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); -ms-transition: all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); transition-transition:all 0.2s cubic-bezier(0.2, 0.47, 0.435, 0.97); margin:9px 5px 5px 5px !important; padding:12px 0px 0px 7px; background:$blueDark; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; color:$white; cursorointer;}.hdr-nav-rt .hdr-me .mearrow{float: left;margin-left: 21px;border-left: 3px solid transparent;border-right: 3px solid transparent;border-top: 3px solid $white;margin-top: -6px;}.hdr-nav-rt .hdr-me:hover { width: 33px;height: 28px;float: left; margin:9px 5px 5px 5px !important; padding:12px 0px 0px 7px; background:$grayDark; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; color:$white; cursorointer;}\[/code\]I need to change mearrow also on hover like \[code\] .hdr-nav-rt .hdr-me:hover .mearrow{ float:left; margin-left:21px; border-left:3px solid transparent; border-right:3px solid transparent; **border-bottom:3px** solid #fff; margin-top:-6px; }\[/code\]IS it possible using only cssEDITBoth mearrow styles also displaying , both shape are displaying after hover