Better way to use pseudo elements
First things first: You have a navigation but refuse to use anchor tags. Why? This is potentially harmful. How are you going to navigate if you don't have links? The only possible way would be completely relying on JavaScript. All users with disabled JavaScript have a useless list of words instead.

HTML:


Use a tags instead of the div's in your HTML (Use &lt;a href="#"&gt; to test this)
I'd suggest using classes instead of ID's in this scenario as well. The lower specificity of classes will ease your live later. Overwriting an ID instead could be hard


CSS:


If you use actual links for your navigation, there is no need for cursor: pointer; on list-items.
If you want the icons to be clickable as well, add the pseudo-elements to the links instead of the list-items
Don't reset the general styling for lists on the type selector ul. Doing this makes you unable to use lists as regular lists in text etc. You can reset the styles for the navigation on #accordion
Adding a class accordion-item to your list-items could help you. You don't selecting like this: #profile:before, #messages:before, #settings:before...


You have some things to consider now. There are more things to improve, but I'd like to see a new question for an updated navigation with the given advice.